html - 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 的 fiddle 中看到的那样，menu 容器的高度是 34px 而 ul 的高度是 30px 所以当我悬停 link 有一个 4px 宽的空间。但是，如果我在 Firefox 中打开它，ul 的宽度为 32px，而我只有 2px 的空间。我尝试调整每个对象的填充但没有运气。那么，为什么 Firefox 会窃取我的 2 个像素？

Answer 1

您的问题在于line-height:normal。两种网络浏览器都有不同的常态概念 :)。

将行高设置为相对值(即 1.2)或绝对值(即 20px)，渲染效果相同。