html - firefox 的行高问题

Question

我在尝试使搜索按钮在 Firefox 上看起来不错时遇到问题。这是一个使用标志性字体、白色背景和 border-radius 制作的输入提交，如下所示:

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 inspector，当我查看“计算值”时，它在 chrome(行高:60px)和 firefox(行高:67px)上呈现的内容不同。

从现在开始我尝试的一切都失败了:/我希望你们能帮我一些忙:)

谢谢!

Answer 1

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

line-height: 60px;

应该是

line-height: 1;

或

line height: 100%;

正如您指定的那样，您希望它与字体的高度相同。