Question

我的页脚我有3列填充：10px 20px 0px;

在那些我有一些头条新闻（h1 / h2）与margin-top：10px;

除了IE 6和7

之外，所有浏览器都可以

在IE 6和7中，标题距离容器顶部10px。（顶部填充缺失，但左/右填充正常）

有人可以告诉我为什么吗？

.footercolumn {
    width: 260px;
    height: 170px;
    padding: 10px 20px 0px;
    text-align: left;
    overflow: hidden;
    background: url(../gfx/footerbg.gif) no-repeat top left;
    float: left;
}

.footercolumn h1, .footercolumn h2, .footercolumn h3 {
    margin-top: 10px;
    font-size: 12px;
    line-height: 1.2em;
    font-weight: bold;
    color: #c5037b;
    display: block;
}

Answer 1

欢迎使用网页开发 - Rob的评论完全正确，人们使用IE 6＆amp; 7不应该被允许在互联网上。你可以去Here查看IE漏洞的详细解释。

在你撕毁你的风格之前，请允许我提出一些建议：Conditional Stylesheets

您在html HEAD部分中应用了类似的内容：

<!--[if IE 7]>
    <link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->

这允许您使用其他CSS来定位IE。阅读链接，因为它变得更精细 - 并且是您遇到的问题的首选路径。最简单的方法是确保您的IE-only css的链接在您的其他样式之后出现，并且通常仅包含更正（除非这不起作用，然后重新定义元素）。例如，如果您在常规CSS文件中完全定义div“.header”，但在IE中向左显示10px，则您的IE条件样式表将包含：

.header{
margin-left: 10px;
}

这将添加到现有的CSS中并纠正您的问题..

祝你好运..

Answer 2

cinqoTimo对这个问题有很好的答案。

我解决这个问题的另一种方法是让我的所有边距都放在容器的底部。

我注意到如果一个div /容器彼此顶上（上面的容器的底边距为1em，下面的容器的顶边距为1em，两个容器都是相同的样式，即：

#imageDiv {
margin:1em;
}

）然后IE7只给1个容器一个保证金。因此，不是在顶部和底部容器之间存在2em的间隙，而是存在1em的间隙。

之后，我决定尝试将底部边距分配给容器，图像等。例如：

#imageDiv {
margin-top:0em;
margin-right:1em auto;
margin-bottom:2em;
margin-left:1em auto;
}

如果你的顶部容器上方需要空的空间，因为它上面没有其他容器，所以可以为它指定一个margin-top大小，或考虑在主体上添加填充，即

body {
padding-top:1em;
}

Answer 3

如果您避免在指定边框和填充的任何元素上指定高度或宽度，则可以避免浏览器框模型实现中的不一致问题。如果你练习，很多布局头痛都会消失。

有关更多信息，请参阅Internet Explorer Box Model Bug。

Answer 4

感谢您的答案和消息......

整夜努力工作我想出了一个适用于所有IE的解决方案： - ）

使用此css在容器div的顶部添加<div class="clearall"></div>解决了问题

clear: { both !important; display: block !important; height: 0 !important; margin: 0 !important; overflow: hidden !important; padding: 0 !important; width: 0 !important; }

IE 6-7不服从填充/边距

4 个答案: