奇怪的CSS行为...移除1像素边框会使<DIV>元素移动约20像素

Question

I have the following:

CSS

#pageBody
{
    height: 500px;
    padding:0;
    margin:0;
    /*border: 1px solid #00ff00;*/
}

#pageContent
{
    height:460px;
    margin-left:35px;
    margin-right:35px;
    margin-top:30px;
    margin-bottom:30px;
    padding:0px 0 0 0;
}

HTML

    <div id="pageBody"> 
    <div id="pageContent"> 
        <p> 
        blah blah blah
        </p> 
    </div> 
    </div> 

如果我取消pageBody中的边框线，一切都很完美... 我打开边框线是为了验证是否符合预期。但是去掉边框线后，pageBody向下移动了大约20像素，而pageContent似乎根本没有移动。

现在这不是真正的页面，而是一个子集。如果没有明显的问题，我可以尝试生成一个最小的工作示例，但我想可能有一个简单快速的答案。

我在Chrome和IE8中看到完全相同的问题，这表明问题出在我身上而不是浏览器上。有什么提示在哪里寻找？我想也许1像素的边框线是某个div内容过大的临界点，但将#pageContent高度更改为例如400并没有任何区别，除了剪裁该div的底部。

- Mr. Boy

---

听起来pageBody可能会从其他地方继承一些东西... - Justin Niessner

我只是将这个例子放在一个简单的网页中，没有遇到任何奇怪的问题。它在IE8、Chrome和Firefox 3.6.3中都按预期工作。我使用了HTML 4.0过渡doctype。 - NotMe

你用Firebug或类似的工具检查过吗？在大多数情况下，通过玩弄样式并检查规则如何继承以及导致不同的布局通常有助于找到像这样的奇怪问题。 - OregonGhost

用户想知道为什么在http://jsfiddle.net/5sxh3/1/上红色粘在顶部，但在http://jsfiddle.net/aq5fT/上红色居中。唯一的区别是边框语句。 - Konerak

我同意Justin和OregonGhost的观点 - 你应该使用Firebug，看看那个div是否从其他地方继承了规则。然后，你也可以在不重新加载页面的情况下进行更改并查看结果。 - JAL

Answer 1

显然，当您为pageBody添加边框或外边距时，pageContent的顶部会被计算为pageBody.border+pageBody.margin+pageContent.margin-top。否则，它似乎会忽略pageContent.margin-top。这是外边距折叠的典型案例。

- Konerak

Answer 2

边距正在折叠。
（通过给#pageBody设置红色背景和#pageContent设置蓝色背景可以看到。）

也就是说：由于两者都是块级元素且边距相接触，它们会一起折叠并保留更大的一个。
如果两个边距之间存在任何边框或填充，则它们不相邻，因此不会折叠。

这是预期的行为：http://www.w3.org/TR/CSS2/box.html#collapsing-margins

- ANeves

Answer 3

尝试在您的div上设置position: relative;...我之前已经用这种方法解决了类似的问题。

- Shawn Steward

---

CSS 的定位会不会破坏 IE6？ - Mr. Boy

实际上恰恰相反... 每当你使用浮点数时，必须对其设置一个位置，否则它将无法在IE6中正常运行。 - Shawn Steward