Differenza nella larghezza del pulsante tra Firefox e Chrome

Question

So che ci sono molte domande CSS FF/Chrome, ma non riesco a trovarlo esatto.

Ecco un violino JS che mostra il problema: http://jsfiddle.net/ajkochanowicz/g5rdd/1/

(Ci scusiamo per il lungo CSS, questo è stato copiato dal sito.)

In sostanza, Firefox e Chrome mi stanno dando due valori diversi per la maggior parte del pulsante, 4 e 6. Vorrei che fosse 4 o meno per entrambi. Cosa sta causando questo?

Answer 1

Non hai specificato un width diverso da auto.

Diversi motori di rendering pensano diversamente come si dovrebbero rendere i siti Web.

Che ne dici di cambiare il width a 4px e :hover a quello che vuoi?

Answer 2

Prova ad aggiungere il CSS qui sotto. Firefox aggiungi un'imbottitura extra sul pulsante.

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

Imparentato: Rimuovere la spaziatura/imbottitura dei pulsanti extra in Firefox

Fonte: http://wtfhtmlcsss.com/#buttons-firefox outline