css - 我的 LI 按钮在 Firefox 中是 "taller"

Question

我有一个导航菜单，它使用列表项作为按钮，按钮底部有一个颜色条。在大多数浏览器中，颜色条显示在按钮底部，按钮内部。但在 Mac Firefox 上，颜色条显示在按钮底部，取代了按钮。所以只有在 Mac Firefox 上，我的按钮比它们应该的高得多。关于如何使这些按钮在 Firefox 中正确显示以匹配它们在其他浏览器中显示更短的方式的任何建议？

http://jsfiddle.net/trevoray/CEXts/3/

 .nav > li {
padding: 0;
float: left;
background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%, rgba(183,183,183,1) 50%, rgba(249,249,249,1) 100%);
border-right: 1px solid #5d5d5d;
border-left: 1px solid #929292;
width: 169px;
height: 45px;
border-top: 1px solid #797979;
border-bottom: 1px solid #575757;
font-family: "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
letter-spacing: -0.5px;
font-size: 14px;
text-shadow: 0 -1px 3px #CCCCCC;
 }

Answer 1

老实说，我不确定这是为什么，但是如果您从 li 样式中删除 height: 45px，一切看起来都很好。