Question

我很难弄清楚为什么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>

Answer 1

我对每一页都这样做：

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

...LALALA

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

它被称为条件评论。它是IE专有的，但表现得像对其他浏览器和验证器的评论。

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

得到一些.ie #whatever {position：relative;}继续并把它们放进去他们应该在哪里的盒子！

Answer 2

不确定但是在CSS中尝试这个

body
{
    padding:0;
    margin:0;
}

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

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

Answer 3

使用：

display: inline;

希望这有帮助。

Answer 4

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

Answer 5

一般来说，特别是对于IE7，但为了更好的练习，总是指定所有方面w / padding或margin ...换句话说，不要只使用margin-top：？px（？for whatever）和假设其余的都没问题。最好使用保证金：？px 0 0 0或任何值。

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

此外，浮动的任何东西都需要宽度和双边距错误，只有在元素浮动的同一边有边距时才会发生.....所以如果你重新声明浮动：对某事，你不想要保证金：0 20px 0 0对同一件事......它会加倍。最好在包含元素上使用填充。

IE7显示问题（增加额外的上边距）

5 个答案: