次の html ドキュメントには 2 つの div がありid='with'
ますid='without
。境界線のある div は、(少なくとも Firefox と chrome では) 境界線のある div よりもかなり高くレンダリングされます。
高さは最大で 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>