Question

我在尝试使用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（line-height：60px）和firefox（line-height：67px）上呈现相同的内容。 / p>

我从现在开始尝试的一切都是失败：/我希望你们能为我提供一些帮助：）

谢谢！

Answer 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

Answer 2

您不应该使用行高定义度量单位，这是因为间距是相对于字体大小的。在你的例子中

行高：60px;

应该是

line-height：1;

或

行高：100％;

因为您指定希望它与字体的高度相同。

firefox的行高问题

2 个答案: