input type = submit testo allineamento verticale in Firefox

Question

sto cercando per lo stile miei pulsanti di forma e sto vivendo un problema in Firefox che non posso andare a fondo di ...

voglio stile certa <a /> s e <input type="submit" /> s a guardare lo stesso (ho un'immagine di sfondo del pulsante, utilizzando una tecnica di porte scorrevoli per applicare un effetto hover.)

tutto questo funziona bene, tranne che in Firefox, presentare il metodo di scrittura è leggermente più in basso di quanto dovrebbe essere. IE e Safari/Chrome funzionano bene.

alt text http://blog.muonlab.com/wp-content/uploads/2009/11/b0rked-buttons.png

Chiunque ha ottenuto tutte le idee?

Grazie

<div class="buttons"> 
    <a href="#" class="button btn-small-grey">&laquo Back</a> 
    <input type="submit" class="button btn-large-green" value="Save changes" /> 
</div> 

.button 
{ 
    cursor: pointer; 
    border: 0; 
    background-color: #fff; 
    color: #fff; 
    font-size: 1.4em; 
    font-weight: bold; 
    outline: 0; 
    font-family: Arial, Verdana, Sans-Serif; 
} 

a.button 
{ 
    display: block; 
    float: left; 
    text-align: center; 
    text-decoration: none; 
    padding: 5px 0 0 0; 
    height: 22px; 
    margin-right: 1em; 
} 

.btn-small-grey 
{ 
    height: 27px; 
    width: 96px; 
    background-position: 0 -81px; 
    background-image: url(/assets/images/buttons/buttons-small.gif); 
} 

.btn-large-green 
{ 
    height: 27px; 
    width: 175px; 
    background-position: 0px -54px; 
    background-image: url(/assets/images/buttons/buttons-large.gif); 
} 

Answer 1

Ho trovato questo post perché avevo risolto questo problema alcuni mesi fa e quando l'ho eseguito di nuovo oggi, non riuscivo a ricordare cosa avessi fatto. Bello. Dopo aver esaminato il mio css ho finalmente trovato la "correzione".Non posso prendere credito perché ho trovato sul web da qualche parte, ma speriamo che sia più utile a voi come lo è stato per me:

input::-moz-focus-inner /*Remove button padding in FF*/ 
{ 
    border: 0; 
    padding: 0; 
} 

Spero che questo aiuta.

Answer 2

Ho avuto lo stesso problema e ho risolto (solo per FF e Safari) fissando la larghezza, ma non l'altezza e giocare con i valori: imbottitura (superiore e inferiore), linea-altezza e, se necessario, impostare l'allineamento verticale al centro. Tuttavia tutto è più facile da fare se imposti tutti i valori (anche la dimensione del carattere) in pixel.

---

EDIT: Penso che non ci sia una soluzione cross-browser, perché il problema è dovuto al rendering del testo dei browser. Per risolvere completamente il problema, puoi disegnare un'immagine di sfondo con il testo e applicare quell'immagine al link o al pulsante. Anche se con questa soluzione si perde in accessibilità.

In alternativa è possibile utilizzare le istruzioni CSS condizionali per migliorare il layout per ciascun browser.

Answer 3

Ho lo stesso problema ogni volta che ho bisogno di disegnare i pulsanti del modulo. Scusa, al momento sono piuttosto impegnato, quindi solo una breve descrizione di come lo risolvo di solito.

In FF il testo è in genere un po 'più basso, esattamente come nell'immagine allegata e quindi applico semplicemente "padding-bottom" sul pulsante stesso. Sposta il testo sul numero del pulsante di pixel in alto.

Il problema è che sposta anche il testo in IE e ora IE appare un po 'spento. Per risolvere il problema, applico "line-height" allo stesso pulsante con esattamente lo stesso valore dell'altezza del pulsante. Questo fa sì che IE ignori completamente il padding e posiziona il testo proprio nel mezzo. Di seguito è riportato il codice HTML di esempio:

<input type="submit" value="SEARCH" class="search"/> 

e CSS:

.search 
{ 
    background: transparent url(../images/sprites.gif) no-repeat -310px 0; /* some button image */ 
    height: 29px; 
    width: 104px; 
    border: 0; 

    /* centering text on button */ 
    line-height: 29px; /* FF will ignore this but works for IE. This value should be same as value of the height property above */ 
    padding-bottom: 2px; /* IE will ignore but works for FF */ 
} 

dispiace non ho applicato direttamente al tuo codice, ma io sono un po 'occupato in questo momento, spero tu abbia l'idea e aiuta comunque.

ps. appena controllato in IE8 e tutto sopra sposta il testo di alcuni pixel in alto. Quindi significa più (infinito?) Beffarsi con il padding in alto/in basso .. Ho perso la pazienza adesso e penso che metterò tutto questo in un foglio di stile separato da ora in poi finché non troverò una soluzione abbastanza facile e universale per tutto questo

Answer 4

Si potrebbe anche considerare di sostituire il pulsante con un elemento diverso del tutto. L'elemento di ancoraggio funziona perfettamente. Basta aggiungere una funzione "invia" al suo evento "onClick" e sarai pronto per partire. Penso che questa sia una soluzione migliore (e più semplice) per i browser incrociati.

Answer 5

ingressi sono formattati non seguendo la convenzione W3 scatola modello in diversi browser, si potrebbe desiderare di includere:

input /*Content follows box model*/ 
{ 
    -moz-box-sizing: content-box; 
    -webkit-box-sizing: content-box; 
    box-sizing: content-box; 

    height:24px; 
} 

includono anche per Firefox (che Shelly ha sottolineato):

input::-moz-focus-inner /*Remove button padding in FF*/ 
{ 
    border: 0; 
    padding: 0; 
} 

Altrimenti potresti usare il tasto

Ho raccolto tutte queste soluzioni da varie fonti, meritano il credito