style - line-width css

Problema de altura de línea de Firefox con campos de entrada

Question

Me he dado cuenta del problema anteriormente, pero supongo que no importó tanto como lo hizo 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 simplemente no hay forma de cambiar el valor predeterminado de altura de línea 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 alguna vez? Si es así, ¿ha encontrado una solución para superar esto?

Answer 1

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

Answer 2

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 font-size + 4px (2 bot superiores 2, supongo) .

En caso de que esto le moleste con el estilo, puede usar el relleno superior e inferior para lograr un efecto de altura de línea falso más grande.

Answer 3

Si su botón de entrada y de envío están uno al lado del otro, con el botón hacia abajo aproximadamente 1px más bajo que la entrada (parece que su imagen de fondo está apagada), un simple:

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

en el botón se alinea perfectamente en FF & IE.

Answer 4

Siempre ajusto mis botones a las anclas, botones, etiquetas y envíos para garantizar que, independientemente del elemento utilizado, el resultado sea exactamente el mismo.

Dado que Firefox insiste en usar !important para declarar line-height , la única forma en que puedo superar este problema es forzar a todos los demás proveedores a usar line-height: normal para los botones, y luego usar 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 5

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 6

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

Answer 7

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

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