填充与Firefox4-8中的边框冲突？(HTML/CSS)

Question

我在Firefox4-8中发现了一个非常恼人的问题，就是填充超出了边框。谷歌浏览器，IE9，Opera11和Safari不受此影响，并完美地显示它。

我已经制作了一个jsfiddle来演示这种效果-当你将鼠标悬停在一个列表项上时，该列表项上的bg颜色会发生变化，就像它在堆栈溢出徽标旁边的按钮上所做的一样。

问题是，如果底部填充设置为10px，Firefox会将其渲染为超出li，其他浏览器也没有问题，但如果更改为9px，Firefox会喜欢它并将其显示得很好，但浏览器的其余用户会将填充渲染为“太短”。

真正令人困惑的是，一个通常符合标准的浏览器会像这样背离这个包。

下面是jsfiddle (我已经注释了关键行，因此您可以在9/10px之间更改它并查看差异)：http://jsfiddle.net/NaxUj/7/

有什么原因以及如何修复它的想法吗？

Answer 1

font line-height的平均问题，不同的浏览器会有不同的处理。所以，与其用padding把line-height赋给你的LI，不如这样：

ul#mainmenu li {
    display:block;
    float:left;
    width:140px;
    line-height:30px;
    text-align:center;
}

http://jsfiddle.net/NaxUj/8/

原因：

因为你没有定义你的li的line-height，所以每个浏览器都会根据它们来render line-height。因此，一定要为跨浏览器功能定义line-height。

检查这个例子，在这个例子中，我没有删除padding，还给了line-height

http://jsfiddle.net/NaxUj/9/