css - texto - Altura de línea FireFox 3

style line height html

Question

Firefox 3 ha introducido un nuevo comportamiento en el que la altura de la línea, cuando está desarmada, difiere de la forma en que otros navegadores la procesan. Por lo tanto, una sección crítica puede rendir demasiado alto en ese navegador. Establecer un porcentaje global no funciona, ya que su base es diferente. Establecer un valor sin unidades como "1" tampoco funciona. ¿Hay alguna forma de normalizar esta dimensión?

Answer 1

Siempre debe "restablecer" los estilos para eliminar todas las incoherencias del navegador con estilos de elementos.

Me gusta el Restablecimiento CSS de Eric Meyer . Yahoo tiene uno también.

Answer 2

El valor calculado de line-height: normal de line-height: normal varía entre plataformas, navegadores (y diferentes versiones del mismo navegador, como usted indica), fuentes e incluso diferentes tamaños de la misma fuente (consulte el artículo de Eric Meyer) .

Estableciendo un valor sin unidades como ...

body {line-height: 1.2;}

... debería trabajar para normalizar el espacio entre los navegadores. Si esto no funciona, ¿puede proporcionar una descripción más detallada de su hoja de estilo?

Es difícil (¿imposible?) Obtener resultados de "píxel perfecto", pero para obtener resultados que sean lo más predecibles posible, trato de usar una altura de línea que produzca un buen valor redondo cuando se multiplique por el tamaño de letra. No podemos conocer el tamaño de fuente predeterminado del agente de usuario, pero 16 píxeles es algo común.

body 
{
    font-size: 100%;
    line-height: 1.5;
}

Si el tamaño de la fuente de inicio del agente de usuario es de hecho 16 píxeles, entonces la altura de la línea de 1.5 saldrá en un buen, incluso 24 píxeles. Sin embargo, los usuarios pueden cambiar el tamaño de fuente predeterminado o el zoom de página, y diferentes navegadores tienen diferentes métodos para escalar la página. Sin embargo, creo que he tenido un éxito razonable para la mayoría de los usuarios. Si no puedo hacer que la altura de la línea salga exactamente, entonces disparo un poco por encima del número entero en lugar de un poco más abajo, porque algunos navegadores parecen truncar valores en lugar de redondearlos.

Además, tenga en cuenta que si usa un porcentaje para la altura de la línea, se comporta de manera diferente cuando se hereda el valor.

body 
{
    font-size: 100%;
    line-height: 150%;
}

p
{
    font-size: 75%;
}

A partir de un tamaño de fuente base de 16 píxeles, la altura de la línea será de 24 píxeles. Dentro de un elemento <p> , el tamaño de la fuente se convierte en 12 píxeles, pero la altura de la línea no se convierte en 18 píxeles, sino que permanece en 24 píxeles. Esta es la diferencia entre line-height: 1.5 y line-height: 150% . Cuando se utiliza body {line-height: 1.5;} , la altura de la línea para <p> es de 18 píxeles.

Answer 3

No hay absolutamente nada que puedas hacer. Cada navegador tiene forma de renderizar CSS y contenido. Puedes usar un reinicio "Maestro" (como sugiere Cowgod), pero incluso así, eso no soluciona los problemas de alineación. Están ahí debido al motor de renderizado real. Apple el CSS a su sitio web existente y pruébelo. Dime si hace que el pixel sea perfecto en todos los ámbitos. No lo hará.

La única manera de lograr la perfección de píxeles es implementar CSS específicos para navegadores específicos. Mozilla tiene el @ -moz-doc , IE tiene sus propios hacks, pero ninguno de estos son parte de las especificaciones del W3C, y todos sabemos que los estándares son importantes. Entonces no hay mucha opción.

Como dijo David anteriormente, es difícil. Me inclino a pensar que es imposible en realidad. ¡Y he pasado horas intentando, créeme! Casi me volví loco más veces de las que me importa contar. Es una píldora difícil de tragar, pero simplemente no hay forma de evitarlo, a menos que todos utilicen el mismo motor de exploración (lo que en realidad daría un gran salto a Internet en mi opinión). Quiero decir, no sería tan difícil pegarle a la interfaz que quieras en tu navegador, siempre y cuando completes [gecko] [webkit] [presto] [tridente] [lo que sea] para manejar el backend ... ya que el bueno todos son de código abierto, podría fusionar los proyectos y realmente ponerse en marcha. La gente necesita aprender a jugar bien juntos;)

Answer 4

PUEDES resolver esto:

Establezca la altura de la línea en 1, luego ponga a cero en el texto usando la parte superior acolchada y la parte inferior acolchada, y establezca la altura en automático.

.zeroed_in_element {
    padding: 4px 2px 5px 2px;
    height: auto;
    line-height: 1;
}