Dai un'occhiata a questo esempio di codice di un pulsante e un'ancora: http://jsbin.com/ecitex/2/editCome normalizzare un pulsante e un'ancora con CSS?
Sto cercando di renderli identici in tutti i browser. Ma le differenze rimangono e differenze diverse in ogni browser (ho provato Chrome, Safari, Firefox, IE8).
Quali normalizzazioni CSS mi mancano?
Aggiornamento: Per suggerito:
- ho aggiunto
line-height: 50px
(anche se) di default del mio agente dell'utente (di Chromeline-height
perbutton
elementi ènormal
, e ancora Centri verticalmente il testo - come si fa ?! - Ho aggiunto
cursor: pointer
per normalizzare i cursori del mouse.
http://jsbin.com/ecitex/11/edit
Così, ora controlla il risultato in Firefox: notare l'imbottitura sul pulsante? Quindi controlla il risultato in IE8: whoa, nota come i due sono completamente e completamente diversi ?!
Aggiornamento 2:
Sembra che i problemi di IE sono noti e non risolvibile: http://www.quirksmode.org/css/tests/mozie_button2.html
non ho trovato nulla su imbottitura di Firefox però. (L'articolo quirksmode cita un problema con Mozilla, ma questa è una questione diversa.)
Update 3:
impressionante, abbiamo risolto il problema di Firefox: http://jsbin.com/ecitex/15/edit
Okay, finora ogni singola risposta ha fornito parte della soluzione, quindi non c'è davvero una sola risposta migliore. Ti concedo la migliore risposta alla persona che:
- Spiega il motivo per cui dobbiamo specificare un
line-height: 50px
al testo verticalmente in un centro dia
, mentre unbutton
ha centrato verticalmente il testo con un sempliceline-height: normal
. - Fornisce una soluzione per il problema di IE.