Inconsistencia de altura del botón (navegador cruzado)

Tengo un problema al configurar la altura de un botón. Básicamente no puedo tenerlo en todos los navegadores. Con Firefox, es más alto que normal, sin ningún motivo.Inconsistencia de altura del botón (navegador cruzado)

aquí Es una captura de pantalla (Firefox, Safari y Opera, en este orden):

Initial

Y aquí el código: http://jsfiddle.net/TMUnS/2/

También probé la adición de algunas declaraciones específicas que encontré en el web, pero en realidad solo redujeron la altura un poco, pero aún así, no son lo mismo (en el mismo orden):

Second try

Y aquí el código: http://jsfiddle.net/TMUnS/4/.

¿Cómo puedo solucionar esto?

Fuente

2012-02-08 entropid

Bueno, esto simplemente sucede y esta pregunta se ha hecho interminablemente. Las entradas y la perfección de píxeles no se mezclan bien la mayor parte del tiempo debido a las incoherencias del navegador. Sugiero que comiences con algo como ** normalize.css ** y luego ajusta desde allí. – elclanrs

Ya tengo un reinicio, pero no parece restablecer esto. – entropid

Firefox tiene esta cosa graciosa llamada -moz-focus-inner. No estoy totalmente seguro de lo que es para, sólo sé que a veces es necesario hacer esto para conseguir botones para comportan:

button::-moz-focus-inner, 
[type="button"]::-moz-focus-inner { 
    padding:0; 
    border:0; 
}

Eso podría ser lo que necesita. Puede ver la diferencia aquí (en Firefox): http://jsfiddle.net/TMUnS/9/

Fuente

2012-02-08 01:57:30

Bueno, de hecho configuré esta propiedad, pero olvidé agregar la parte 'padding: 0', ¡así que no funcionó correctamente! Pero ahora tengo un problema nuevo, que puede ver aquí: http://jsfiddle.net/TMUnS/12/. Los botones tienen la misma altura, pero en Firefox no está bien verticalmente. – entropid

No veo su problema claramente. Algunas cosas a tener en cuenta: 1) La demo a la que acaba de vincular no contiene el código '-moz-focus-inner' 2) No especificó una' font-family'. Tengo diferentes fuentes predeterminadas en Chrome VS Firefox, por lo que el renderizado es diferente. 3) '

Supongo que depende mucho. Gracias por el consejo. :) – entropid

¿Está utilizando un restablecimiento de CSS? Un restablecimiento CSS normaliza el CSS para los navegadores.

probar este reajuste Yui: YUI CSS RESET

Fuente

2012-02-08 01:51:55 thisisablock

Ya estoy usando un restablecimiento de CSS: http://meyerweb.com/eric/tools/css/reset/. – entropid

Este es un conjunto de características en Firefox que limita la línea de altura de los botones. Establece una altura de línea predeterminada para los botones - http://www.cssnewbie.com/input-button-line-height-bug/. Intentaría usar una altura fija para los botones y jugar con el relleno.

Fuente

2012-02-08 01:54:53

Sí, esto es lo mejor que puedes hacer. Altura fija y la misma altura de línea para centrar el texto verticalmente. Utilicé esta técnica con botones de búsqueda que tocan el ingreso de texto, por lo que es importante que se vea coherente en todos los navegadores. – elclanrs

Inconsistencia de altura del botón (navegador cruzado)

Respuesta

Cuestiones relacionadas