我的 LI 按钮在 Firefox 中“更高”答案

【问题标题】：My LI buttons are "taller" in Firefox我的 LI 按钮在 Firefox 中“更高”
【发布时间】：2013-03-23 02:09:40
【问题描述】：

我有一个导航菜单，它使用列表项作为按钮，按钮底部有一个颜色条。在大多数浏览器中，颜色栏显示在按钮底部，按钮内部。但在 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;
 }

【问题讨论】：

标签： css firefox

【解决方案1】：

只需将边距设置为0就可以了

 .nav > li {
 margin: 0;
 }

我觉得很好……

【讨论】：

我假设您试图说“该样式已存在”，是的，您必须将其添加到其他 .nav > li 规则中。
随便...

【解决方案2】：

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

【讨论】：

这太奇怪了。谢谢@Evan！