Usa CSS per fare <button> e <a> guarda lo stesso

Question

Mi piacerebbe fare il pulsante < > e <a> a guardare lo stesso. Ho trovato un post simile che suggerisce di aggiungere

box-sizing: content-box; 
-webkit-box-sizing: content-box; 
-moz-box-sizing: content-box; 

Tuttavia, ha ancora una leggera differenza di altezza se visualizzato in Firefox. Ecco lo jsfiddle. Qualsiasi aiuto?

Answer 1

http://jsfiddle.net/H3HK8/22/

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

questo risolve quello centrale, che sta ancora lavorando all'input finale.

Da qui http://www.aheadcreative.com/removing-unwanted-button-padding-in-firefox/

UPDATE

ho il sospetto per l'ultimo esempio state cadendo vittima di questa http://www.cssnewbie.com/input-button-line-height-bug/#.USzRd6Wcmzc

È possibile visualizzare l'altezza della linea non ha alcun effetto in questo esempio http://jsfiddle.net/H3HK8/24/, anche con! importante aggiunto.

E mentre cercavo di aggirare questa regola, ho scoperto qualcosa che rende la situazione un po 'più terribile: le regole importanti definite dal browser non possono essere sovrastimate da regole importanti definite dall'autore! Questa regola non può essere annullata da un file CSS, uno stile in linea - qualsiasi cosa.

Answer 2

È necessario assicurarsi che tutte le proprietà CSS siano uguali. Quindi non solo la casella di ridimensionamento (che in realtà non fa nulla in sé), ma anche l'imbottitura, il margine, line-height, font-size, nei precedenti ecc