FireFox 3 línea-altura

Question

Firefox 3 ha introducido un nuevo comportamiento en el que la línea-altura, cuando no se especifica diferencia de cómo otros navegadores hacen.Por lo tanto, una sección crítica tal vez render demasiado alto en ese navegador.Establecer un porcentaje mundial no funciona, ya que la base es diferente.Configuración de una radio sin unidades de valor "1" no funciona bien.Hay alguna manera de normalizar esta dimensión?

Answer 1

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

Configuración de una radio sin unidades de valor, tales como...

body {line-height: 1.2;}

...debe trabajo para normalizar el espaciado entre los navegadores.Si esto no funciona, puede proporcionar una descripción detallada de su hoja de estilos?

Es difícil (¿imposible?) para obtener "pixel-perfect" de los resultados, pero con el fin de obtener resultados que son tan predecible como sea posible, trato de usar una línea de altura que produce una buena ronda de valor cuando se multiplica por el tamaño de fuente.No sabemos el agente de usuario por defecto del tamaño de la fuente, pero 16 píxeles es algo común.

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

Si el agente de usuario de partida del tamaño de la fuente es, de hecho, de 16 píxeles, a continuación, la altura de la línea de 1.5 sale a un bien, incluso el 24 píxeles.Los usuarios pueden cambiar el tamaño de fuente predeterminado o la página de zoom, sin embargo, y los diferentes navegadores tienen diferentes métodos de la ampliación de la página.Sin embargo, creo que he tenido éxito razonable para la mayoría de los usuarios.Si no puedo hacer que la altura de la línea salen exactamente, entonces me dispara un poco por encima de la entero en lugar de un poco más abajo, ya que algunos navegadores parece truncar los valores en lugar de alrededor de ellos.

También, tenga en cuenta que si utiliza un porcentaje de la altura de la línea, se comporta de manera diferente cuando el valor es heredado.

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

p
{
    font-size: 75%;
}

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

Answer 2

No hay absolutamente nada que puedas hacer. Cada navegador tiene una forma de renderizar CSS y contenido. Puede usar un & Quot; Maestro & Quot; restablecer (como sugiere cowgod), pero incluso entonces, eso no va a solucionar los problemas de alineación. Están allí debido al motor de renderizado real. Apple el CSS a su sitio web existente y pruébelo. Dime si hace que el píxel sea perfecto en todos los ámbitos. No lo hará.

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

Como dijo David arriba, es difícil. Me inclino a pensar imposible en realidad. Y he pasado horas intentándolo, ¡confía en mí! Casi se volvió 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 usen el mismo motor de navegación (lo que en realidad supondría un gran avance para Internet). Quiero decir, no sería tan difícil aplicar cualquier interfaz que desees en tu navegador, siempre y cuando complementes [gecko] [webkit] [presto] [trident] [lo que sea] para manejar el backend ... Desde lo bueno todos son de código abierto, podría fusionar los proyectos y comenzar realmente. La gente necesita aprender a jugar bien juntos;)

Answer 3

PUEDES resolver esto:

Establezca la altura de la línea en 1, luego cero en su texto usando padding-top y padding-bottom, y configure la altura en auto.

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

Answer 4

Siempre debe " reset " estilos para eliminar todas las inconsistencias del navegador con los estilos de elementos.

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