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

Question

我的页脚有3列，填充: 10px 20px 0px；

在那些我有一些标题(h1/h2)与页边距-顶部: 10px；

这在除IE 6和7之外的所有浏览器中看起来都可以

在IE6和IE7中，标题从容器顶部开始放置10px。(顶部填充缺失，但左/右填充正常)

为什么？

http://www.hr-relocation.com/test.html

.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

欢迎来到web开发-Rob的评论是完全正确的，使用IE6和IE7的人不应该被允许在互联网上。你可以去Here查看IE错误的详细解释。

在你开始改变你的风格之前，请允许我推荐一些东西：Conditional Stylesheets

您可以在html HEAD部分中应用如下内容：

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

这使您可以使用其他CSS来定位IE。阅读链接，因为它变得更加细粒度-并且是您正在经历的问题的首选路线。最简单的方法是确保指向仅限IE的css的链接位于其他样式之后，并且通常只包含更正(除非这不起作用，然后重新定义元素)。例如，如果您在常规.header文件中完全定义了div“CSS”，但在IE中却向左显示10px，则IE条件样式表将包含：

.header{
margin-left: 10px;
}

它将被添加到现有的CSS中，并将更正您的问题。

祝你好运。

Answer 2

对于这个问题，cinqoTimo有一个很好的解决方案。

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

我注意到，如果a的div/容器彼此重叠(上面的容器底边距为1em，下面的容器上边距为1em)，两个容器的样式是相同的，即：

#imageDiv {
margin:1em;
}

)，那么IE7将只给一个容器一个边际。所以在顶部和底部容器之间不是有2em的间隙，而是有1em的间隙。

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

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

如果您需要在最上面的容器上留出空间，因为它上面没有其他容器，那么应该可以为它分配一个页边距-顶部大小，或者考虑在正文中添加填充，即，

body {
padding-top:1em;
}

Answer 3

如果您避免在指定边框和填充的任何元素上指定高度或宽度，则将避免浏览器的框模型实现中出现不一致的问题。如果你这样做，许多布局问题就会消失。

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