Question

我有一个非常简单的HTML。红色div位于蓝色div内，顶部边距为10 px。在非ie浏览器中，蓝色框与视口顶部相距10 px，红色div位于蓝色div的最顶部。我期望的是ie行为：红色div必须与蓝色div的顶部相距10 px。为什么非ie浏览器会像这样渲染？（我认为错误的行为是IE的，但为什么呢？）

并且，这样做的正确方法是什么？

why blank? http://img92.imageshack.us/img92/7662/blankmr7.jpg

<html>
<head>
<style>
body { margin:0; padding:0; }
.outer
{
    background-color: #00f;
    height: 50px;    
}
.inner
{
    height: 20px;
    width: 20px;
    background-color: #f00;
    margin: 10px 0 0 10px;
}
</style>
</head>
<body>
<div class="outer">
    <div class="inner">
    </div>
</div>
</body>
</html>

Answer 1

尽管strager's answer已经解释了你需要知道它为什么会发生 - 也就是说它发生在IE以外的浏览器中，因为规格说明了 - 我认为他选择了the CSS 2.1 specification关于collapsing margins的部分中的错误引用。

他引用的观点解释了利润率如何崩溃，而不是如何“转移”到父元素。

这就是解释它的原因：

如果框的顶部和底部边距相邻，则边距可能会通过它折叠。在这种情况下，元素的位置取决于其与边缘正在折叠的其他元素的关系。

如果元素的边距与其父元素的上边距折叠，则框的上边框边缘定义为与父元素相同。

或者，Mozilla developer documentation中的人类可读形式：

父母和第一个/最后一个孩子：

如果没有边框，填充，内联内容或间隙将块的边距顶部与其第一个子块的边距顶部分开，或者没有边框，填充，内联内容，高度，最小高度或者max-height将块的边距底部与其最后一个子节点的边缘底部分开，然后这些边距会崩溃。折叠的保证金最终在父母之外。

至于如何修复它，我可能会选择overflow: auto解决方案Chris Lloyd suggested（尽管可能有副作用）。

但那真的取决于代码的其余部分是什么样的。在这个简单的示例中，您可以轻松地将子元素上的 margin 更改为父元素上的 padding 。

或者你可以浮动子元素，或绝对定位它......

如果你想真正想要的话，如果反clearfix怎么样：

.outer:before {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

Answer 2

利润率正在合并。 IE产生的输出可能不正确。

在规格中（目前对我而言）：

正常流动中的两个或多个相邻的块箱垂直边缘坍塌。得到的边距宽度是相邻边距宽度的最大值。

您可以使用边框而不是边距，并将border-color设置为透明。

Answer 3

这个问题有一个非常合适的答案：overflow: auto;

<html>
<head>
<style>
body { margin:0; padding:0; }
.outer
{
    background-color: #00f;
    height: 50px;
    overflow: auto;
}
.inner
{
    height: 20px;
    width: 20px;
    background-color: #f00;
    margin: 10px 0 0 10px;
}
</style>
</head>
<body>
<div class="outer">
    <div class="inner">
    </div>
</div>
</body>
</html>

Answer 4

可能是IE看到DOM为div.inner，div.outer是它的父节点（并计算偏移量），
而其他浏览器却让他们都回答了body元素？

Answer 5

好的，没有溢出的解决方案：

<html>
<head>
<style>
body { margin:0; padding:0; }
.outer
{
    background-color: #00f;
    height: 50px;
    border: 1px solid transparent;
}
.inner
{
    height: 20px;
    width: 20px;
    background-color: #f00;
    margin: 10px 0 0 10px;
    padding: 0;
}
</style>
</head>
<body>
<div class="outer">
    <div class="inner">
    </div>
</div>
</body>
</html>

内部元素需要推送一些内容，并提供一个boder（或强制浏览器考虑溢出）这样做。

非常简单的html意外保证金

5 个答案: