以下html文档有两个div,一个带边框(
我曾预期它们最多会在高度上相差2个像素,但是
我无法弄清楚为什么会这样。
id ='with'
),一个没有(id ='without'
)。带边框的div在渲染时(至少在Firefox和Chrome上)比没有边框的高很多。我曾预期它们最多会在高度上相差2个像素,但是
alert
告诉我,它们的高度相差19个像素。我无法弄清楚为什么会这样。
<!DOCTYPE HTML>
<html>
<head>
<title>Height of divs with/without a border</title>
<script type="text/javascript" src='jquery-1.8.3.js'></script>
<script type='text/javascript'>
$(document).ready(function() {
alert($('#with' ).height() + ' / ' +
$('#without').height());
});
</script>
</head>
<body>
<div style='width:300px;border:black 1px solid;background-color:yellow' id='with'>
<h1>With a border</h1>
bla<br>
bla<br>
bla<br>
</div>
<div style='width:300px;background-color:green' id='without'>
<h1>Without a border</h1>
bla<br>
bla<br>
bla<br>
</div>
</body>
</html>