Bài viết này nguyên gốc được viết trong blog cá nhân của tôi nên từ ngữ không "chỉn chu" phù hợp với site này xong tôi không muốn sửa lại chúng, mong bạn đọc thông cảm nhé.
nếu viết đoạn mã trang web với css như sau: <html>
<head>
<style type="text/css">
html, body{
height:100%;
background-color:black;
}
#dvContainer{
width:780px;
height:100%;
background-color:white;
padding:0px;
}
#dvContent{
width:100%;
border:solid 2px blue;
background-color:yellow;
}
</style>
</head>
<body>
<div id="dvContainer" >
<div id="dvContent">content</div>
</div>
</body>
</html>
thì trên IE hiện ngon: bà con sẽ thấy cái dvContainer nó bao lấy cái dvContent (6, chắc v7 cũng vậy).
Nhưng
còn thằng FF thì lại không, dvContainer sẽ có width=780px còn dvContent
sẽ có width=780px * 100% + 4px (=2*2 kích thước border); kết quả là cái
dvContent nó thò ra ngoài 4px;
Mình chưa đo cụ thể nhưng giải pháp là khi các thành phần bao, chứa có border thì độ rộng của thằng ở trong nhớ trừ đi độ dày border nhé