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;
}

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

知道问题出在哪里吗？

4

7 回答 7

9

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

于 2009-08-07T17:13:55.223 回答
6

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

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

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

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

于 2009-08-08T09:40:30.450 回答
1

尝试关闭您的清除 div。

<div class="clear"></div>
于 2009-08-07T17:14:54.240 回答
1

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

于 2009-08-07T17:30:32.210 回答
1

enter code here尝试使用具有溢出宽度的容器：隐藏在浮动 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 留在了我的工作机器上进行测试，所以我无法验证）

于 2009-08-07T17:32:24.327 回答
1

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

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

于 2011-01-24T08:00:39.147 回答
0

我没有 IE8……但是您是否尝试添加 clear: 到底部 div 并为顶部浮动之一添加底部边距？我很确定在没有任何额外 div 的情况下会达到相同的效果。

于 2009-08-08T16:23:23.430 回答