Problema en la altura de la línea de Firefox con los campos de entrada

Question

Me he dado cuenta del problema anteriormente, pero supongo que no importa tanto como ahora.

Lo que descubrí es que Firefox tiene un valor de altura de línea predeterminado de 1.2 para campos de entrada que no se pueden cambiar. Al menos en OSX, no tengo Windows, así que no puedo confirmarlo allí.

Hice algunos experimentos y pruebas y no hay forma de cambiar el valor de altura de línea predeterminado de Firefox. Todos los otros navegadores (vale, acabo de probar con Chrome y Safari) obedecen perfectamente mi valor pero no Firefox.

¿Alguien ha notado esto y, en caso afirmativo, ha encontrado una solución para superar esto?

Answer 1

Por lo que sé por experiencia, la altura de línea en la entrada no cambiará a menos que cambie el tamaño de la fuente, entonces la altura de la línea cambiará para ser igual que el tamaño de fuente + 4px (2 arriba 2 bot, supongo).

En caso de que esto le moleste con el estilo, puede usar el acolchado superior e inferior para lograr un efecto de altura de línea falso mayor.

Answer 2

Use Height en lugar de Line-Height. Esto funciona para mí en casi todos los navegadores de Windows 7, pero no lo he probado en OSX.

Answer 3

Si su entrada y botón de enviar están lado a lado, con el botón hacia abajo alrededor de 1 píxel más baja que la entrada (se parece a la imagen de fondo está apagado), un simple:

display:inline-block; 
vertical-align: top; 

en las líneas de botón, perfectamente en FF & IE.

Answer 4

Desafortunadamente la línea de altura se establece en! Importante en el css base de Firefox ... http://hg.mozilla.org/mozilla-central/rev/b97aef275b5e

Answer 5

siempre me Estilo mis botones contra anclas, los botones, las etiquetas, y supedita a garantizar que, independientemente de qué elemento se usa , el resultado se ve exactamente igual.

Desde Firefox insiste en usar !important declarar line-height, la única manera de que pueda superar con calma este problema es forzar a todos los demás proveedores de utilizar line-height: normal para los botones, y luego utilizar el relleno para centrar verticalmente el texto:

/** 
* Consistently style buttons on anchors, buttons, labels, and submits 
*/ 
.btn { 
    . 
    . 
    . 
    height: auto;  // ensure heights on inputs do not affect submit buttons 
    line-height: normal; // all browsers use FF's ever unchanging value 
    padding: .5em 1em; // vertically center the text in the button 
    . 
    . 
    . 
} 

Esto funciona de manera similar para las entradas.

Answer 6

Simplemente déle al elemento de formulario de envoltura la altura de línea deseada y al menos todos los campos de entrada de tipo = "texto" en Firefox tomarán la misma altura de línea. Los botones Enviar parecen comportarse de manera diferente ...

Answer 7

Line-height no se puede aplicar a elementos en línea reemplazados como botones y entradas. Este es el comportamiento correcto relativo a la especificación.

Ver https://developer.mozilla.org/en/docs/Web/CSS/line-height para más detalles.