firefox的线路高度问题



我在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)上不会呈现相同的东西。

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

谢谢!

您不应该用线条高度定义测量单位,这样间距就与字体大小有关。在您的示例中

线条高度:60px;

应该是

线路高度:1;

线路高度:100%;

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

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

最新更新