html - IE8 - 顶部边距为 : 10px has no margin 的容器

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 是否有效。可能是页边距试图从页面顶部移开。