1

我在 IE8 和 Chrome 上发生了这个问题，这让我认为这是一个标准问题。

我正在使用没有任何内容但在 CSS 中设置背景图像和高度/宽度的 DIV 创建一个带有标题和菜单的站点。我希望内部 DIV 对父 div 有边距，但它将边距应用于父 div。将内容放在 div 中可以解决此问题。IE7没有这个问题。我不想使用 ，因为它确实把东西扔掉了，而且看起来像是一个 hack。

请参阅下面重新创建的示例代码：

<style>

#header{
    width:600px;
    height:300px;
    background-color:red;
}

#headerMenu{
    height:100px;
    width:500px;
    margin-left:auto;
    margin-right:auto;
    background-color:blue;
    margin-top:20px;
}

</style>

<div id="header">
    <div id="headerMenu">
    </div>
</div>

如果您给父 div 内容甚至是边框，则布局可以正常工作。我在这个网站上遇到过同样的问题几次。我想为菜单项列表提供一个边距顶部，但由于 headerMenu div（它的父级）也没有任何内容，它会使属性冒泡。

这是怎么回事？

4

4 回答 4

3

我认为您正在陷入保证金崩溃。

有关更多信息，请参阅关于边距折叠的 CSS 2.1 规范。

于 2009-08-29T17:05:59.650 回答
3

是的，这是一个标准的东西。这叫做margin collapsing，你在IE7中看不到它的原因很可能是因为IE7弄错了。

边距有点棘手，因为它们没有指定元素周围的区域，而是指定元素之间的最小距离。当子元素有边距而父元素没有内边距或边框时，边距折叠会发生。边距应用于子元素和周围元素之间，而不是子元素和父元素之间。

由于某些浏览器（只有我知道的 IE）不能正确处理折叠边距，因此您现在应该避免使用它们。如果可能，请使用填充，或在父对象上设置填充或边框以避免边距折叠。

于 2009-08-29T17:17:02.653 回答
1

尝试添加overflow: auto到#header css 代码。

例如，

#header{
    width:600px;
    height:300px;
    background-color:red;
    overflow: auto;
}

编辑：似乎position: absolute也有效。

于 2009-08-29T17:04:59.903 回答
0

我也遇到了这个问题，并将其添加到 css

border: 0px solid;
于 2013-01-11T02:38:07.950 回答