Question

编辑：这只发生在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;
}

显然，我已经省略了所有非凡的风格，如边框，背景颜色和图像，字体大小等。我只保留了重要的东西。

知道问题出在哪里？

Answer 1

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

Answer 2

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

我们测试了这个，只有IE8错了：

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

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

Answer 3

尝试关闭明确的div。

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

Answer 4

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

Answer 5

enter code here尝试使用宽度为overflow的容器：隐藏在浮动的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进行测试，所以我无法验证）

Answer 6

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

我想出的解决方案是将位置：relative，top：10px和margin-top：0px添加到h1元素。

Answer 7

我没有IE8和我...但你是否尝试添加清除：两者都在底部div并为其中一个顶部浮动添加底部边距？我很确定在没有任何额外div的情况下会达到同样的效果。

IE8 - 保证金最高的容器：10px没有保证金

7 个答案: