【问题标题】：Weird CSS behavior... removing a 1px border makes <DIV> move about 20px奇怪的 CSS 行为...删除 1px 边框会使 <DIV> 移动大约 20px
【发布时间】：2010-05-28 15:54:28
【问题描述】：

我有以下几点：

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 将页面下降了大约 20px，而 pageContent 似乎根本没有移动。

现在这不是真正的页面，而是一个子集。如果没有什么明显的，我可以尝试生成一个工作最小的样本，但我认为可能首先有一个简单的快速答案。

我在 Chrome 和 IE8 中看到了同样的问题，这表明我不是浏览器。任何提示在哪里看？我想知道 1px 边框可能是一个引爆点，使 div 的内容太大，但是将 #pageContent 高度更改为例如 400 并没有什么区别，除了从该 div 上剪掉底部。

【问题讨论】：

听起来 pageBody 可能从其他地方继承了某些东西......
我只是把这个例子放在一个简单的网页中，并没有遇到任何奇怪的事情。它按预期在 IE8、Chrome 和 Firefox 3.6.3 中运行。我使用了 html 4.0 过渡文档类型。
您是否使用 Firebug 或类似工具对其进行了检查？在大多数情况下，通过调整样式并检查规则是如何继承的，并导致不同的布局，它有助于找到类似这样的奇怪事物。
用户想知道为什么jsfiddle.net/5sxh3/1 red 粘在顶部，但jsfiddle.net/aq5fT red 居中。唯一的区别是边框声明。
我同意 Justin 和 OregonGhost 的观点 - 您应该使用 Firebug 并查看该 div 是否从其他地方继承规则。您也可以在不重新加载页面的情况下更改它，看看会发生什么。

标签： css html-parsing

【解决方案1】：

显然，当您向pageBody 添加边框或边距时，pageContent 的顶部将计算为pageBody.border + pageBody.margin + pageContent.margin-top。否则它似乎忽略了pageContent.margin-top。

这是margin collapsing的典型案例

【讨论】：

【解决方案2】：

边距正在崩溃。
（给#pageBody 红色背景和#pageContent 蓝色背景可见。）

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

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

【讨论】：

【解决方案3】：

尝试在您的 div 上设置 position: relative;...我以前曾解决过类似类型的问题。

【讨论】：

难道没有任何 CSS 定位会影响 IE6 吗？
实际上恰恰相反......任何时候你做一个浮动你必须在它上面设置一个位置，否则它会破坏IE6。