6

我在尝试使搜索按钮在 Firefox 上看起来不错时遇到问题。这是一个由标志性字体、白色背景和边框半径组成的输入提交，如下所示：

display: block;
width: 60px;
height: 60px;
line-height: 60px !important;
padding: 0;
background: white;
border: 0;
border-radius: 30px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
-khtml-border-radius: 30px;
font-family: 'iconic';
color: #bad104;
font-size: 5em;

它必须看起来像这样（chrome 和 IE 完美呈现我的代码）：http: //img341.imageshack.us/img341/6590/kogy.png

但是当我在 firefox 上使用相同的代码时，我得到的是：http: //img17.imageshack.us/img17/953/jms4.jpg

我在两个浏览器上查看了 dom 检查器，当我查看“计算值”时，它不会在 chrome（行高：60px）和 firefox（行高：67px）上呈现相同的东西。

从现在开始我尝试的一切都失败了：/我希望你们能对我有所帮助:)

谢谢 ！

4

2 回答 2

1

您不应该使用 line-height 定义测量单位，这样间距是相对于字体大小的。在你的例子中

行高：60px；

应该

行高：1；

或者

行高：100%；

当您指定您希望它与字体的高度相同时。

于 2013-07-02T10:51:55.897 回答
1

FF 中的按钮行高是硬编码的，line-height: normal !important;这意味着即使是用户定义的line-height: xxx !important也不会覆盖它。

阅读这些：

https://bugzilla.mozilla.org/show_bug.cgi?id=349259

https://bugzilla.mozilla.org/show_bug.cgi?id=697451

于 2014-02-19T18:34:00.380 回答