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

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>包装另一个<div>并将overflow: hidden ， width: 100%应用于它，以便下面浮动元素的元素将正确显示。

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会达到同样的效果。