CSS: el tamaño de los botones en Chrome es diferente de Firefox

Tengo el siguiente código HTML:

 .submitbutton{margin-left:-2px;padding:1px}  ... 
...

En Firefox, el botón de entrada tiene más relleno que en Chrome.

¿Alguna idea de por qué?

ACTUALIZACIÓN: Si se pregunta por qué tengo el margen negativo, es porque entre el campo de entrada y el botón de entrada hay demasiado espacio.

 /* Remove button padding in FF */ button::-moz-focus-inner { border:0; padding:0; } 

Obtendrá la misma apariencia de botón en Chrome y Firefox.

A pesar de que usted como desarrollador prueba en diferentes navegadores y ve la diferencia en los botones, el usuario no lo hará. Es muy fácil concentrarse en cosas que los usuarios no notarán: es probable que el usuario tenga Firefox o IE o Chrome, pero no todos. Rara vez los usuarios cambian los navegadores a lo largo del tiempo y menos cambian entre ellos y se quejan de unos pocos píxeles de diferencia.

Entonces, si considera los botones y la experiencia en un solo navegador a la vez, y si funciona bien en esa experiencia / navegador, entonces no se moleste en pasar más tiempo. En lugar de eso, avance a los próximos pasos.

Esto no responde “por qué”, pero alguien más lo explicó.

los elementos de formulario se procesan de forma diferente (como valores predeterminados) según el sistema operativo y / o el navegador. si desea que los elementos de su formulario (campos de entrada, botones de envío, etc.) se vean iguales en todas las instancias, debe diseñarlos explícitamente usando bordes, márgenes y márgenes.

Lo que nadie menciona aquí es que Chrome restablece el CSS para estos elementos:

 input[type="button"], input[type="submit"], input[type="reset"], input[type="file"]::-webkit-file-upload-button, button 

Así que no importa a qué ajuste el relleno, hasta donde puedo ver, será reemplazado por Chrome. He intentado utilizar !important y otras técnicas y todavía no tuve suerte. Si alguien tiene alguna idea de esto, me gustaría saberlo.

Intenta usar -webkit-box-sizing:content-box , luego lee sobre box-models.

Prueba esto

 /* Browser Firefox to match the Chrome */ #buttonid::-moz-focus-inner, .buttonclass::-moz-focus-inner, button::-moz-focus-inner { padding: 0 !important; border: 0 none !important; } 

Intenté ahora modificar la altura y el relleno al mismo tiempo.

El resultado es bastante bueno. Parece ser correcto para ambos navegadores (FF y Chrome en Linux) … por ejemplo lo puse:

 .classname { height:20px; padding:4px; } 

Tal vez sea solo mi día de suerte … sin embargo, puedes intentarlo.

Para obtener el mismo tamaño en ambos navegadores, debe establecer los mismos valores iniciales para todos los elementos CSS, como un restablecimiento.

Así es como solucioné el problema: pon esto al comienzo de tu archivo css

 body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td, a { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width-value: 0px; border-bottom-width: 0px; border-left-width-value: 0px; } 

Ahora debe corregir algunos cambios de aspecto en su página, pero se verá casi igual en todos los navegadores.