Diferencia en el ancho del botón entre Firefox y Chrome

Question

Sé que hay muchas preguntas de FF/Chrome CSS, pero parece que no puedo encontrar esta exacta.

Aquí hay un violín JS que muestra el problema: http://jsfiddle.net/ajkochanowicz/g5rdd/1/

(Disculpas por el largo CSS, esto fue copiado del sitio).

Esencialmente, Firefox y Chrome me están dando dos valores diferentes para el ancho más interno del botón, 4 y 6. Me gustaría que sea 4 o menos para ambos. ¿Qué está causando esto?

Answer 1

No especificaste un width otro que auto.

Diferentes motores de representación piensan de manera diferente cómo se deben representar los sitios web.

¿Qué tal cambiar el width a 4px y :hover ¿A lo que quieras?

Answer 2

Intente agregar el CSS a continuación. Firefox agregue un acolchado adicional en el botón.

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

Relacionado: Eliminar espaciado/acolchado de botones adicionales en Firefox

Fuente: http://wtfhtmlcss.com/#buttons-firefox outline