5
Tài liệu html theo sau có hai div, một có đường viền (id='with') và một không có (id='without). Các div với biên giới được trả lại (ít nhất là trên firefox và chrome) cao hơn đáng kể so với một với biên giới.tại sao đường viền có chiều rộng 1px tăng div lên 20 pixel?
Tôi đã dự kiến chúng thay đổi tối đa 2 pixel, nhưng, alert cho tôi biết chiều cao của chúng là 19 pixel khác nhau.
Tôi không thể hiểu tại sao lại như vậy.
<!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>
chỉ fiddled này: http://jsfiddle.net/kAZmD/ – Elliott
tôi nhận được 74/74 trong ie9 và 80/80 trong chrome – Elliott
@Elliott xem câu trả lời của tôi dưới đây; jsfiddle sử dụng css bình thường hóa theo mặc định. Vô hiệu hóa nó và bạn sẽ thấy những gì OP có nghĩa là – lnrbob