Question

我正在尝试修复IE 8及以下版本中一个非常恼人的问题。

似乎IE正在以不同于FF和Chrome的方式解释像素。

我已将网站放在此处：www.therapyoracle.co.uk/new

如果向右滚动，您将看到div大于它应该的大小。

#page容器的宽度为1008px，横幅div为1008px，此横幅div内有两个div，分别为600和408像素。现在我只有数学C，但600 + 408 = 1008没有？它在FF和Chrome中看起来很好。

我讨厌IE。

'＃page'虽然没有任何边框。这是我的CSS：

#page {
    margin:0 auto;
    width:1008px;
    background:white;
    padding:0px;
    min-height:100%;
    position:relative;
    margin-bottom:-22px;
    box-sizing:content-box;
}

#header {
    width:100%;
    text-align:center;
    background:#000000;
}
    #hCont {
        margin:0 auto;
        width:1000px;
        height:100px;
    }
    #hLogo {
        float:left;
    }
    #hContact p:first-child {
        font-weight:bold;
        font-size:16px;
        margin-bottom:8px;
    }


#navCont {
    width:100%;
    background:#6a8a3f;
    border-bottom:3px solid #1d2b00;
}

#nav {
    margin:0 auto;
    width:1000px;
    height:35px;
    font-size:17px;
    color:#382D07;
}
    #nav ul {
        padding:0;
        margin:0;
        list-style:none;
    }
    #nav li {
        float:left ;
        padding:6px;
        padding-right:25px;
    }

#banner {
    height:201px;
    width:1008px;

}
    #img {
        float:left;
        width:600px;
        height:201px;
    }
    .txt {
        float:left;
        width:408px;
        height:67px;
        padding:0;
    }
#opt1, #opt2 {
    width:407px;
    border-right:1px solid #1d2b00;
}
#right {
    float:right;
    width:250px;
}

Answer 1

您的问题是由使用的拳击模型（MDN link）的差异引起的。 IE通常使用边框框模型，而其他人使用内容框模型。

所以在IE中，#page内容的大小实际上是1008px减去边界。作为解决方案，您可以在IE8 +中设置box-sizing css-property或将border设置为零。

有关更多信息，请查看上面的MDN链接。

1px不等于1px？

1 个答案: