Diferencia en el ancho del botón entre Firefox y Chrome
-
28-10-2019 - |
Pregunta
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?
Solución
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?
Otros consejos
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