IE8 - 具有顶部边距的容器：10px 没有边距答案

【问题标题】：IE8 - Container with margin-top: 10px has no marginIE8 - 具有顶部边距的容器：10px 没有边距
【发布时间】：2010-11-17 18:29:29
【问题描述】：

编辑：这只发生在 IE8 中，它在 IE7、Firefox、Opera 等中运行良好

首先，这是我在photoshop中制作的一张图片来展示我的问题：http://richardknop.com/pict.jpg

现在你应该知道我的问题了。这是我正在使用的标记的简化版本（我省略了最不相关的内容）：

<div class="left">
    <div class="box">
        // box content
    </div>
    <div class="box">
        // box content
    </div>
    <div class="box">
        // box content
    </div>
</div>
<div class="right">
    <div class="box">
        // box content
    </div>
    <div class="box">
        // box content
    </div>
    <div class="box">
        // box content
    </div>
</div>
<div class="clear"></div>
<div class="box">
    //
    // NOW THIS BOX HAS NO TOP MARGIN
    //
</div>
<div class="box">
    // box content
</div>

CSS 样式是这样的：

.clear {
    clear: both;
}
.left {
    float: left;
}
.right {
    float: right;
}
.box {
    overflow: auto;
    margin-top: 10px;
}

很明显，我忽略了所有不相关的样式，如边框、背景颜色和图像、字体大小等。我只保留了重要的东西。

知道问题出在哪里吗？

【问题讨论】：

您是否设置了 DOCTYPE（例如，您是在 IE8 标准模式下运行的吗？还是怪癖？）
是的，我有：ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" rel="nofollow" target="_blank">w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
我没有详细查看您的问题，但想知道这是否可能是由于边距折叠引起的，例如andybudd.com/archives/2003/11/no_margin_for_error

标签： html css internet-explorer xhtml margin

【解决方案1】：

查看padding-top: 10px 是否有效。可能是页边距试图从页面顶部开始。

【讨论】：

我不能使用 padding-top: 10px;因为盒子已经有了背景色并且已经有了 padding: 10px 所以里面的内容看起来更好。
尝试将&nbsp; 之类的填充物添加到清晰的 div 中。我记得在一些早期版本中有一个错误需要这样的内容。
添加解决了这个问题:) 我只需要添加 height: 0;到 .clear 类。
@Justin 您应该将此作为答案发布。这是真正的解决方案加上高度：0；溢出：隐藏；。 +1

【解决方案2】：

尝试关闭您的清除 div。

<div class="clear"></div>

【讨论】：

这是一个问题，但不是问题。将 clear 类添加到框 div 仍将清除之前的任何内容。
这里忘记关了，源码里面已经关了。我编辑了我的帖子。

【解决方案3】：

我不太明白这种方法。您可以将 <div>s 与右类和左类包装在另一个 <div> 中，并将overflow: hidden、width: 100% 应用于它，以便浮动元素下方的元素将正确显示。

【讨论】：

是的，但我更喜欢使用最少的标记，并且只使用这么多绝对必要的 div。这只会添加另一个没有语义意义的元素，这对样式来说甚至是不必要的。
@Richard，我想说

完全一样。我个人会选择溢出解决方案，因为 HTML 看起来更好。但这就是我。

【解决方案4】：

enter code here尝试使用宽度为overflow:hidden 的容器围绕浮动的div，并移除清除的div。

    <div id="container">
        <div class="left">    
            <div class="box">        // box content    </div>    
            <div class="box">        // box content    </div>    
            <div class="box">        // box content    </div>
        </div>
        <div class="right">    
            <div class="box">        // box content right    </div>    
            <div class="box">        // box content    </div>    
            <div class="box">        // box content    </div>
        </div>
    </div>
    <div class="box">    //    // NOW THIS BOX HAS NO TOP MARGIN    //</div>
<div class="box">    // box content</div>

还有 CSS

#container { width: 100%; overflow: hidden; }

（抱歉，我将 IE7 留在工作机器上进行测试，因此无法验证）

【讨论】：

【解决方案5】：

我认为这是一个 IE8 错误。与浮动左右 div 的兄弟元素相关。无论有没有清除 div，最终的非浮动元素都会在 IE8 中失去其上边距。

我们对此进行了测试，只有 IE8 会出错：

http://www.inventpartners.com/content/ie8_margin_top_bug

我们还提出了 3 个解决方案。

【讨论】：

很好的调查。棘手的主题是内部清除的折叠边距。在您的示例中，所有 3 个非浮动 div 的上边距都已折叠，因此第三个的上边距不会丢失；它与第一个一起崩溃。没有明确的属性，IE8 的行为是绝对正确的，其他浏览器也同意。添加 clear 属性应该做什么并不那么清楚。查看 Opera 的行为。顺便说一句，您的演示不需要两个花车。
有趣。我没想到会这样。 IE8 显然比 Gecko 更严格地处理边距崩溃。我之前已经写过关于 display: table in gecko 的另一个边距崩溃问题，它在 IE8 中渲染得更好（不同）几个月！
嗨 buti-oxa - 我在我的文章中添加了一个脚注，详细说明了您对这个问题的分析。希望没关系。如果你想让我改变它，请告诉我。
看起来不错。对于 MC 将来继续成为 PITA，您绝对是正确的。

【解决方案6】：

我没有 IE8...但是您是否尝试添加 clear: 到底部 div 并为顶部浮动之一添加底部边距？我很确定不用任何额外的 div 也能达到同样的效果。

【讨论】：

【解决方案7】：

我有类似的问题，Matt Bradley 提供的解决方案对我不起作用（但还是感谢您发布它！）。我想在 h1 元素上有 margin-top:10px 。

我想出的解决方案是在 h1 元素中添加 position:relative 、 top:10px 和 margin-top:0px 。

【讨论】：