Problema di line-height con firefox

Question

Ho riscontrato un problema nel tentativo di rendere un pulsante di ricerca soddisfacente su firefox. E 'un ingresso submit realizzato con un tipo di carattere iconico, uno sfondo bianco e un border-radius in questo modo:

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; 

Si deve assomigliare a questo (Chrome e IE rende perfettamente il mio codice): http://img341.imageshack.us/img341/6590/kogy.png

Ma quando io uso lo stesso codice su firefox, ecco cosa ottengo: http://img17.imageshack.us/img17/953/jms4.jpg

Ho guardato su dom inspector su entrambi i browser, e quando guardo "valori calcolati", non rende la stessa cosa su chrome (linea -height: 60px) e firefox (line-height: 67px).

Tutto quello che ho provato da oggi è un fail:/spero che voi ragazzi avere qualche aiuto per me :)

Grazie!

Answer 1

Non è necessario definire un'unità di misura con altezza della linea, in modo che la spaziatura sia relativa alla dimensione del carattere. Nell'esempio

altezza riga: 60 px;

dovrebbe essere

line-height: 1;

o

linea altezza: 100%;

come si specifica che si desidera che abbia la stessa altezza del carattere.

Answer 2

L'altezza del pulsante in FF è codificata come line-height: normal !important;, pertanto anche un utente definito line-height: xxx !important non lo sovrascriverà.

dare a queste una lettura:

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

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