IE7 显示问题（添加额外的上边距）答案

【问题标题】：IE7 display issues (adding extra top margin)IE7 显示问题（添加额外的上边距）
【发布时间】：2011-05-27 09:37:09
【问题描述】：

我很难弄清楚为什么 IE7 会为此页面添加额外的填充！

这就是 IE7 正在做的事情： http://imgur.com/lwyRI.png

正确的页面将三个黑色标签连接到上图。这就是它的外观：也存储在 imgur: 64qbf.png （我只允许一个链接）

页面链接可以在img中找到。（再次，我只能发布一个链接）

请帮忙！

css代码：

<style type="text/css">
#background{
    background-image: url(/images/store/vaporIronBK.jpg);
    background-repeat:no-repeat;
    height:auto;
    width:665px;

    margin-top:125px;

    margin-left:228px;
    padding-top:5px;
    font-size:15px;
}

#background a {
    color: #ffffff;
    text-decoration: none;
}

#background a:hover {
    color: #de156d;
}

#videoLinks  {
    margin-top:52px;
    height: 100px;
}

#buy{
    width:400px;
    float:left;
    clear:both;
    padding-left:235px;
    color:#000000;
}

#video {
    float: right;
    left: 683px;
    margin-left: 35px;
    margin-top: 166px;
    width: 200px;
    color: #000000;
}

#video a {
    text-decoration: none;
    color: #000000;
}

#video a:hover {
    color: #de156d;
}

#footnotes  {
    color:#ffffff;
    margin-top: 37px;
}

#bottom-text {
    margin-left:40px;
    margin-top:445px;
    width:575px;
}

#bottom-text a {
    color: #de156d;
    text-decoration: none;
}

#bottom-text a:hover {
    color: #000000;
}

#bottom-text p {
    text-align: justify;
}

#bottom-text h2 {
    font-size: 25px;
    color: #000000;
    padding-bottom: 10px;
}

#bottom-text h3 {
    padding-bottom: 5px;
}

#bottom-text p {
    padding-bottom: 20px;
}

#bottom-text .header-text {
    padding-bottom: 25px;
}

#bottom-text p.taylor-image {
    text-align: center;
}

.tabs {
    height: 30px;
    width: 180px;
    float: left;
    margin-left: 30px;
    padding-top: 10px;
}
</style>

【问题讨论】：

你需要包含一些示例代码/css/一些东西。我们无法从静态图像中调试...
如果没有实际的代码就很难说。至少为页面的该部分添加 CSS/属性定义怎么样？或者您使用的是所见即所得的编辑器并且不知道实际的 HTML/CSS？
请张贴一些 html 和 css。有了这个，它就像一个算命先生
什么是JS错误？会不会跟这个有关系？
讽刺的是，他关于 css 的帖子需要一些 css 调整...

标签： html css internet-explorer internet-explorer-7

【解决方案1】：

我对每一页都这样做：

<body>
<!--[if IE]><div class="ie"><![endif]-->

...LALALA

<!--[if IE]></div><![endif]-->
</body>

这称为条件注释。它是 IE 专有的，但行为类似于对其他浏览器和验证器的评论。

现在您可以使用 .ie 祖先指定 IE 特定规则。

得到一些 .ie #whatever{position:relative;} 继续并把那些盒子应该在哪里！

【讨论】：

【解决方案2】：

不确定，但可以在你的 CSS 中尝试一下

body
{
    padding:0;
    margin:0;
}

http://www.w3schools.com/css/css_margin.asp http://www.w3schools.com/css/css_padding.asp

或者希望看到其他人发布的一些代码。

【讨论】：

已添加到主 css 文件中。我也尝试将其添加到此页面，但没有成功。

【解决方案3】：

使用：

display: inline;

希望这会有所帮助。

【讨论】：

好的，如果您仍然找不到解决方案，即存在双边距错误，请阅读有关 css 框模型或为方便起见使用这样的条件：这段代码放在文档的头部，并且仅当您在指定的浏览器中时才会使用此样式表。并为您的 ie 添加另一个样式表遇到问题并删除额外的边距或您遇到的任何问题。希望这会有所帮助

【解决方案4】：

尝试从#background 中删除margin-top:，然后为#background 添加clear:both 或clear:right。

【讨论】：

【解决方案5】：

一般来说，尤其是对于 IE7，但为了更好的实践，始终指定所有边 w/padding 或 margin...换句话说，不要只使用 margin-top:?px （？休息很好。最好使用 margin:?px 0 0 0 或任何值。

另一个一般的想法，尤其是对于 IE 7 及以下版本，是不要在同一个元素上使用边距和填充。

另外，任何浮动的东西都需要一个宽度，而对于双边距错误，它只发生在元素浮动一侧的边距相同时......所以如果你声明浮动：在某事上，您不希望在同一件事上拥有 margin: 0 20px 0 0 ......它会加倍。最好在包含元素上使用填充。

【讨论】：