Html IE8 - 顶部有边距的容器：10px 没有边距
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1245914/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
IE8 - Container with margin-top: 10px has no margin
提问by Richard Knop
EDIT: This happens only in IE8, it works fine in IE7, Firefox, Opera etc
编辑：这仅在 IE8 中发生，它在 IE7、Firefox、Opera 等中工作正常
First of all, here is a picture I have made in photoshop to demonstrate my problem: http://richardknop.com/pict.jpg
首先，这是我在photoshop中制作的一张图片来演示我的问题：http: //richardknop.com/pict.jpg
Now you should have idea about my issue. Here is a simplified version of markup I'm using (I left out most irrelevant content):
现在你应该知道我的问题了。这是我正在使用的标记的简化版本（我省略了最不相关的内容）：
<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>
And CSS styles go like this:
CSS 样式是这样的：
.clear {
clear: both;
}
.left {
float: left;
}
.right {
float: right;
}
.box {
overflow: auto;
margin-top: 10px;
}
Obviously I have left out all irreevant styles like borders, background colors and images, font sizes etc. I have kept only important stuff.
显然，我忽略了所有不相关的样式，如边框、背景颜色和图像、字体大小等。我只保留了重要的东西。
Any idea where could be the problem?
知道问题出在哪里吗？
回答by Justin
See if padding-top: 10pxworks. It might be that the margin is trying to go from the top of the page.
看看是否padding-top: 10px有效。可能是页边距试图从页面顶部移出。
回答by Richard Knop
I think this is an IE8 bug. Relates to a sibling element of a floated left and right div. With or without a clearing div, the final unfloated element loses its top margin in IE8.
我认为这是一个 IE8 错误。与浮动的左右 div 的同级元素相关。无论是否有清除 div，最终未浮动的元素都会在 IE8 中失去其上边距。
We've tested this, and only IE8 gets it wrong:
我们对此进行了测试，只有 IE8 出错：
http://www.inventpartners.com/content/ie8_margin_top_bug
http://www.inventpartners.com/content/ie8_margin_top_bug
We also came up with 3 solutions.
我们还提出了 3 个解决方案。
回答by bluesun
I have similar problems, and the solutions provided by Matt Bradley did not work for me (but thanks for posting it anyway!). I wanted to have margin-top:10px on a h1 element.
我有类似的问题，并且 Matt Bradley 提供的解决方案对我不起作用（但无论如何感谢您发布它！）。我想在 h1 元素上设置 margin-top:10px 。
The solution I came up with was by adding position:relative , top:10px and margin-top:0px to the h1 element.
我想出的解决方案是向 h1 元素添加 position:relative 、 top:10px 和 margin-top:0px 。
回答by idrumgood
Try closing your clear div.
尝试关闭清晰的 div。
<div class="clear"></div>
回答by dalizard
I don't quite get this approach. You could wrap the <div>s with class right and left in another <div>and apply overflow: hidden, width: 100%to it so that the elements below floated elements will get displayed correctly.
我不太明白这种方法。你可以包裹<div>带班正确s，而在另一个左<div>和应用overflow: hidden，width: 100%它使下方浮动元素的元素将被正确显示。
回答by ScottE
enter code hereTry using a container with a width with overflow:hidden around the floated divs, and remove the cleared div.
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>
And the CSS
和 CSS
#container { width: 100%; overflow: hidden; }
(sorry, I left IE7 on my work machine for testing so I can't verify)
（抱歉，我把 IE7 留在我的工作机器上进行测试，所以我无法验证）
回答by kmiyashiro
I don't have IE8 with me... but did you try adding clear: both to the bottom div and adding a bottom margin to one of the top floats? I'm pretty sure that would achieve the same effect without any extra divs.
我没有 IE8 ……但是您是否尝试将 clear: 添加到底部 div 并为顶部浮动之一添加底部边距？我很确定这会在没有任何额外 div 的情况下达到相同的效果。
