Question

我遇到一些填充问题。在Chrome / Firefox中，它看起来与Internet Explorer不同。在Internet Explorer中，它要大得多。这是

.menu ul li{
    display:inline;
    padding-right:60px;
    margin:0;
}

为什么呢？

.menu{
    background-color:#000;
    height:35px;
    padding-top:15px;
    color:#fff;
    font-size:18px;
}

.menu ul{
    padding:0; 
    margin:0;
    list-style-type:none;
}

.menu ul li{
    display:inline;
    padding-right:60px;
    margin:0;
}

.menu a:link{
    color:#fff;
}

.menu a:active{
    color:#fff;
}

.menu a:hover{
    color:#fff;
}

.menu a:visited{
    color:#fff;
}

我真的希望有人可以提供帮助:)。

Answer 1

IE计算填充作为高度/宽度的一部分，其他浏览器将其解释为高度/宽度加上填充。所以尽量只给出高度/宽度或填充/边距。

Answer 2

如果你想统一盒子模型，即与其他浏览器的盒子模型，你可以随时使用 box-sizing CSS3属性。在旧版本的ie中不支持它，因此最好在chrome，ff等中使用border-box而不是使用content-box。进一步阅读看这里 - http://www.css3.info/preview/box-sizing/

Answer 3

因为即使您设置了字体样式，不同的浏览器也有不同的字体样式。同样地，即具有不同的正面尺寸所以你可以为IE编写代码。

这里是帮助如何在特定的css中使用的链接。

http://css-tricks.com/how-to-create-an-ie-only-stylesheet/

CSS - 填充IE问题？

3 个答案: