Firefox窃取mah像素

Question

http://jsfiddle.net/wzew9/

#menu {
    width: 1001px; height: 34px;
    padding: 0; margin: 0;
    background-color: #d9e4ea;  
}

#menu ul {
    float: left;
    padding: 0 20px 0 203px; margin: 0;
    list-style: none; line-height: normal;
}

#menu a {
    display: block; border: none;
    margin: 0 47px 0 0; padding: 5px 9px 4px 9px;
    text-decoration: none;
    font-size: 18px;
}

正如您在Chrome中的小提琴中所看到的那样，menu容器的高度为34px而ul的高度为30px，所以当我hover link时，有4px宽阔的空间。但是，如果我在Firefox中打开它，ul的宽度为32px，我只能获得2px的空间。我试着调整每个物体的填充但没有运气。那么为什么Firefox会盗取我的2个像素呢？

Answer 1

您的问题出现在line-height:normal。两种Web浏览器都有不同的常态概念：）。

将行高设置为相对（即。1.2）或绝对（即20px）值，渲染将相同。