Come normalizzare un pulsante e un'ancora con CSS?

Question

Dai un'occhiata a questo esempio di codice di un pulsante e un'ancora: http://jsbin.com/ecitex/2/edit

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 Chrome line-height per button 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 di a, mentre un button ha centrato verticalmente il testo con un semplice line-height: normal.
• Fornisce una soluzione per il problema di IE.

Answer 1

È possibile rimuovere quel chilo in più in Firefox utilizzando:

button::-moz-focus-inner { 
    border: 0; 
    padding: 0; 
} 

Ecco una buona spiegazione da Eric Meyer sull'altezza della linea che, si spera, spiega perché è necessario impostarlo esplicitamente come 50px: http://meyerweb.com/eric/thoughts/2008/05/06/line-height-abnormal/.

Ecco qualche nuova CSS che risolve il problema dimensione del carattere in IE:

button, a { 
    display: inline-block; 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    appearance: none; 
    margin: 10px 0; 
    padding: 0px; 
    height: 50px; 
    border-width: 0; 
    background-color: Red; 
    color: White; 
    font-family: sans-serif; 
    font-weight: normal; 
    font-size: inherit; 
    text-decoration: none; 
    line-height: 50px; 
    cursor: pointer; 
    font-size: 100%; 
} 
button { 
    #width:0px; 
    overflow: visible; 
} 
button::-moz-focus-inner { 
    border: 0; 
    padding: 0; 
} 

Answer 2

è necessario utilizzare line-height proprietà per portare il testo di ancoraggio tag centrato verticalmente

Demo

CSS

button, a { 
    display: inline-block; 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    appearance: none; 
    margin: 10px 0; 
    padding: 0; 
    height: 50px; 
    border-width: 0; 
    background-color: Red; 
    color: White; 
    font-family: sans-serif; 
    font-weight: normal; 
    font-size: inherit; 
    text-decoration: none; 
    line-height: 50px; <-------- Here 
} 

Answer 3

aggiungere l'attributo cursor:pointer; al fine di aggiungere un puntatore quando il mouse è al passaggio del mouse (l'input non ce l'ha sempre)

e infine l'uso line-height:46px; per l'allineamento verticale

il codice completo è qui ->http://jsbin.com/ecitex/10/edit