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

为了对你完全诚实，我不确定为什么会这样，但如果你从height: 45px样式中移除li，一切看起来都很好。

Answer 2

在

上设置边距为0

 .nav > li {
 margin: 0;
 }

对我来说很好......

我的LI按钮是＆＃34;更高＆＃34;在Firefox中

2 个答案: