FireFox 3 de altura de línea

Question

Firefox 3 ha introducido un nuevo comportamiento en el que la altura de línea, cuando se desarma, difiere de cómo otros navegadores lo 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

El valor calculado 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 (see Eric Meyer's article).

establecimiento de un valor sin unidades tales como ...

body {line-height: 1.2;} 

... debe trabajo 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 (¿es imposible?) Obtener resultados "perfectos como píxeles", pero para obtener resultados lo más predecibles posible, trato de usar una altura de línea que produzca un buen valor redondo cuando se multiplica por la fuente -tamaño. 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 fuente de partida del agente de usuario es de hecho 16 pixeles entonces la altura de la línea de 1.5 sale a un agradable, 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 es y no se convierten 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 usa body {line-height: 1.5;}, la altura de línea para <p>es 18 píxeles.

Answer 2

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

Me gusta Eric Meyer's CSS Reset. Yahoo tiene uno también.

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 forma de alcanzar 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 evitarla, 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 tiene que aprender a jugar bien juntos;)

Answer 4

Puede resolver esto:

Conjunto altura de la línea a 1, entonces cero en el texto con padding-top y padding-bottom, y establecer la altura de automóviles.

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