Проблема с линейной высотой с firefox

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; 

Он должен выглядеть следующим образом (хром и IE делает совершенно мой код): http://img341.imageshack.us/img341/6590/kogy.png

Но когда Я использую тот же код в firefox, вот что я получаю: http://img17.imageshack.us/img17/953/jms4.jpg

Я посмотрел на инспектора дома в обоих браузерах, и когда я смотрю на «вычисленные значения», он не делает то же самое на хром (строка -height: 60px) и firefox (line-height: 67px).

Все, что я пытался теперь является неисправность:/Я надеюсь, что вы, ребята, будете иметь некоторую помощь для меня :)

Спасибо!

Answer 1

Вы не должны определять единицу измерения с высотой линии, это так, чтобы расстояние было относительно размера шрифта. В вашем примере

line-height: 60px;

должно быть

высота линии: 1;

или

высота строки: 100%;

, поскольку вы указываете, что хотите, чтобы она была той же высоты, что и шрифт.

Answer 2

Строка строки в 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