css - 1px不等于1px？

Question

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

似乎 IE 对像素的解释与 FF 和 Chrome 不同。

我已将网站放在这里:www.therapyoracle.co.uk/new

如果向右滚动，您会看到 div 比应有的大。

#page容器的宽度是1008px，banner div是1008px，这个banner 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一般使用border box模型，其他的使用content box模型。

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

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