2011-12-11 17 views
7

Tengo el siguiente problema:conflicto entre la línea de la altura y la altura real cuando cursiva se utilizan

I tienen un elemento span con 18px línea de altura y 16px de tamaño de fuente. Esto funciona muy bien cuando el texto en el interior no es en cursiva; el lapso permanece 18 píxeles de alto.

El problema surge cuando el texto dentro del tramo está en cursiva o en negrita. Por alguna razón, la altura del elemento span agrega un píxel, y obtengo un tramo alto de 19 píxeles.

Este problema solo se encuentra en Firefox. IE, Safari, Opera y Chrome no tienen este problema. El lapso permanece 18 píxeles de alto sin importar nada.

¿Alguien ha tenido este problema antes?

Este es el código erróneo:

span 
{ 
    font-size : 18px ; 
    line-height : 18px ; 
} 

span.italicSpan 
{ 
    font-style : italic; 
} 

Hay un ejemplo aquí:

http://edincanada.co.cc/test/shjs-0.6/test7.html

favor verifique en los otros navegadores si lo desea. Notará que los elementos de tramo se mantienen a 18 píxeles de alto, ya que deben mantenerse de acuerdo con la altura de línea: 18px

+0

Mismo problema con webkit. Esto se ve interesante. –

Respuesta

4

No puede ajustar la altura de línea de un elemento en línea. Debe flotarlo o configurarlo en display: block o display: inline-block.

+0

Buena captura. Puedo confirmar que lo soluciona en webkit. – FakeRainBrigand

+0

Suponiendo que mi problema es el mismo que el de los OP: esto no lo soluciona. Mi problema es similar: agregar font-style: italic agrega 1px a la altura calculada, a pesar de una altura de línea (correctamente especificada en un antecesor de nivel de bloque) que es mucho más grande que el tamaño de fuente.Solo se exhibe en Windows, pero ocurre en todos los navegadores. –

+0

@AdamA ¿Las alturas calculadas son las mismas con/sin cursivas si el elemento en sí se da directamente 'display: block', o si se declara una' height' explícita? – justis

0

En la medida de lo posible (viendo la página de ejemplo en Firefox 8 con Firebug instalado), también existe un problema para el primer elemento div.

La razón es que, de forma predeterminada, el elemento div hereda la altura de línea de su elemento primario, que tiene 19px como valor (esto depende de la fuente y del navegador). Establecer la altura de línea en un elemento interno solo implica un límite inferior en la altura de línea real.

Por lo tanto, la solución es establecer la altura de línea en el elemento de nivel de bloque adjunto (o para convertir el elemento span en un elemento de bloque en pantalla, como se sugiere en otro elemento).

0

He encontrado este problema también. Creo que está relacionado con ciertas fuentes (he tenido que suceder con Sorts Mill Goudy, por ejemplo) y cómo se clasifican sus caracteres en cursiva en relación con sus letras romanas. La altura de una línea depende del "content box" de los elementos en ella, por lo que las cursivas más grandes pueden interferir con la altura calculada de la línea.

La única solución confiable que he encontrado (que no sea el uso de una fuente diferente) es jugar con la propiedad vertical-align de las cursivas. Cuando el texto del cuerpo está alineado con el baseline, he encontrado que alinear verticalmente las cursivas al top o bottom de la línea resuelve todo.

¡Por supuesto, ahora su cursiva está sutilmente desalineada con respecto al texto del cuerpo! Al final, depende de usted si esto ayuda o no.

Cuestiones relacionadas