box model应该足够简单，但我不会理解它。
这是一种毫无意义的形式
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Box model test</title>
<link type="text/css" rel="stylesheet" href="test.css">
</head>
<body style="position:relative; top=0px; left=0px">
<form action="for_submitted.php" method="post">
<fieldset style="top:0px; left: 0px; width: 128px; height: 64px;">
<legend> </legend>
<div class="label" style="top:24px; left: 16px; width: 81px; height: 14px;">Box 1</div>
</fieldset>
<fieldset style="top:0px; left: 128px; width: 128px; height: 64px;">
<legend> </legend>
<div class="label" style="top:24px; left: 64px; width: 22px; height: 14px;">Box 2</div>
</fieldset>
<div class="submit_button" style="top:64px; left:64px;"><input type="submit" name="submitButton"
value="Submit"></div>
</form>
</body>
</html>
及其CSS
body
{
background-color: white;
width: 100%;
position: relative;
}
.panel, .label, fieldset
{
position: absolute;
font: 8px Arial;
}
.submit_button
{
position: absolute;
}
我希望它能显示
.---------..---------.
| box 1 | box 2 |
.---------..---------.
但是在MSIE8（我被迫使用）和FireFox中，它显示
.--------..--------.
| box 1 || box 2 |
.--------..--------.
为什么它们重叠？
答案 0 :(得分：1)
这里有几个问题。首先，您需要重置CSS以删除浏览器的用户代理样式表添加的边距和填充。像Eric Meyer's这样的东西会。
其次，在添加重置CSS后，仍然会有一些重叠。这是由边框引起的，边框的宽度不是width的一部分。 outline不受此影响，因此我在下面的演示中使用它来表明元素实际上并不重叠，但我不建议使用它来代替边框。相反，在进行计算时应考虑边框的宽度。