logo标签列表

IE8 - 带有 margin-top: 10px 的容器没有外边距

htmlcssinternet-explorerxhtmlmargin
8

编辑：这只发生在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标准模式或怪异模式）？ - scunliffe
是的，我有： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> - Richard Knop
我还没有详细查看你的问题，但想知道它是否可能是由于边距折叠导致的，例如http://www.andybudd.com/archives/2003/11/no_margin_for_error/。 - ChrisW
7个回答
9

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

我不能使用padding-top: 10px;，因为这些盒子已经有背景颜色和内边距：10px，所以它们内部的内容看起来更好。 - Richard Knop
6
尝试在空的 div 中添加类似于 " " 的填充符号。我记得在早期的某些版本中存在一个需要此类内容的错误。 - Justin
添加   解决了问题 :) 我只需要在 .clear 类中也添加 height: 0;。 - Richard Knop
@Justin，你应该将这个作为答案发布。这是正确的解决方案，还有height:0; overflow:hidden;。+1 - Carrie Kendall
6

我认为这是IE8的一个bug。它与一个左浮动和右浮动的div元素的同级元素有关。无论是否有清除浮动的div，最后一个未浮动的元素在IE8中都会失去其顶部边距。

我们已经测试过了，只有IE8会出现这个问题：

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

我们还提出了3个解决方案。
好的调查。棘手的问题是清除内部折叠边距。在您的示例中，未浮动div的所有3个顶部边距都折叠了，因此第三个div的顶部边距没有丢失；它与第一个div一起折叠了。没有clear属性，IE8的行为肯定是正确的，其他浏览器也同意。添加clear属性应该做什么并不清楚。请查看Opera的行为。顺便说一下，您的演示不需要两个浮动。 - buti-oxa
有趣。我之前没有这样想过。IE8在边距折叠方面显然比Gecko更加严格。我之前已经写过关于Gecko中使用display: table时的另一个边距折叠问题，而在IE8中呈现得更好（不同）。我怀疑在未来几个月中，会有相当多的这些边距折叠不一致性问题会困扰HTML开发人员！ - Matt Bradley
嗨，buti-oxa - 我在文章中添加了一个脚注，详细介绍了你对这个问题的分析。希望没问题。如果你想让我做任何改变，请告诉我。 - Matt Bradley
看起来不错。你绝对是正确的，MC将来仍然会是一个让人头疼的问题。 - buti-oxa
1
尝试在浮动的div周围使用带有overflow:hidden宽度的容器，并删除已清除的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进行测试，无法验证）

1

我也遇到了相似的问题，Matt Bradley 提供的解决方案并没有对我起到作用（不过还是要感谢他的分享！）。我的问题是我想要在一个 h1 元素中使用 margin-top:10px。

我自己找到了解决方案，就是给 h1 元素添加 position:relative、top:10px 和 margin-top:0px 属性。

1

尝试关闭您的清除div。

<div class="clear"></div>
那是一个问题，但不是这个问题。将clear类添加到盒子div中仍然会清除之前的任何内容。 - Justin
我只是忘了在这里关闭它，在源代码中已经关闭了。我编辑了我的帖子。 - Richard Knop
1
我不太理解这种方法。您可以将类为right和left的
包装在另一个
中，并应用overflow: hidden，width: 100％，以便浮动元素下方的元素将正确显示。
是的，但我更喜欢最小化标记，并仅使用必要的div。这只会添加另一个没有语义意义甚至不必要于样式的元素。 - Richard Knop
1
@Richard，我认为<div class="clear"> </div>完全相同。个人而言，我会选择溢出解决方案，因为HTML看起来更好。但这只是我的想法。 - dalizard
0

我手头没有IE8...但你尝试给底部的div添加clear:both属性，并在顶部的其中一个浮动元素上添加底部边距吗？我相信这样做可以达到同样的效果，而不需要额外的div。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接