0

我正在尝试解决 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;
}
4

1 回答 1

2

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

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

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

于 2012-05-11T17:19:40.753 回答