IE-Win Line-height bug

Traducido de: http://www.positioniseverything.net/explorer/lineheightbug.html

INTRODUCCIÓN:

IE/Win continua amenazándonos. Este ejemplo describirá un bug en el cual la propiedad line-height no es correctamente renderizada si la línea contiene un elemento reemplazado.

Muy simple, si por defecto el line-height se cambia a un valor mayor, el espacio encima y debajo de cualquier línea de texto que contiene un elemento reemplazable, como por ejemplo un emoticon, será la mitad que el espacio en cualquier otra parte del texto.

NAVEGADORES AFECTADOS:

Microsoft Internet Explorer 5.01 / Windows

Microsoft Internet Explorer 5.5 / Windows

Microsoft Internet Explorer 6

DESCRIPCIÓN:

El gráfico muestra como IE renderiza inconsistentemente el line-height.

El ancho de la línea es hecho excepcionalmente grande para exagerar el efecto del bug, el problema es obvio.

El HTML necesita entender que este bug no es mas que texto plano, con un elemento reemplazado en la línea, como una imagen, en ese texto.

El valor de 100px del line-height es aplicado al elemento body, el cual debería separar las líneas de los textos casi con 100px.

ver una demostración:

http://www.positioniseverything.net/explorer/sidepages/msie-lineheight-replaced

-element-demo-01.html

Suficientemente extraño, este bug aparece con la simple presencia de un elemento reemplazado: IMG, INPUT, TEXTAREA, SELECT y OBJECT.

Definiciones: elemento reemplazado.

“Un elemento por el cual CSS que lo formatea conoce solo sus dimensiones intrínsecas. Los elementos HTML, IMG, INPUT, TEXTAREA, SELECT, y OBJECT pueden ser ejemplos de elementos reemplazados. Por ejemplo, el contenido de un elemento IMG es a menudo reemplazado por la imagen que el atributo ’src’ designa. CSS no define cómo son encontradas las dimensiones intrínsecas”.

[http://www.w3.org/TR/REC-CSS2/conform.html#replaced-element ]

DESCRIPCIÓN DETALLADA:

Futuras investigaciones muestran que IE/Win aparentemente piensa que tiene una buena razón para este comportamiento. Puede parecer aleatoria en un principio, pero no lo es.

Como especifican las recomendaciones de W3C CSS2.1 [W3C CSS-2.1 recommendations], la diferencia entre el alto de la línea y el tamaño del texto se llama “leading” - la mitad se llama “half-leading”.

El usuario debería añadir ese espacio arriba y abajo.

Por ejemplo, si un font-size de 12 px es definida con un line-height de 20px, entonces deberían añadirse 8px de espacio, 4 pixels arriba y 4 pixels abajo.

Cuando IE/Win encuentra una línea que contiene un elemento reemplazable, colapsa el “half leading” de esa línea con el “half-leading” de la línea siguiente y la anterior.

¿HAY ARREGLO?

Actualmente no hay un fix adecuado para este bug. El bug en sí mismo es muy difícil, íncluso esto es decir poco.

Una vez el elemento es sacado fuera del flujo, dándole un posicionamiento absoluto o flotándolo, el bug deja de ocurrir.

Considerando que ninguno de nosotros realmente tiene una idea de cómo IE calcula el alto de la línea y el hecho de que la situación no puede ser más básica, parece que el bug no puede resolverse de raíz.

De cualquier manera, en algunas situaciones puedes resolverlo.

HACKEANDO:

Ten cuidado aplicando los márgenes de arriba y abajo para el elemento reemplazado, puede forzar el alto de línea y no ser lo mismo que lo que se pretendía.

Desafortunadamente, esta solución no es muy universal y cuenta con un par de requerimientos simples:

- Es necesario saber en todo momento el alto del elemento reemplazado.

- Es necesario que el alto de todos los elementos reemplazados sean casi igual si quieres usar las mismas clases CSS.

Aplicando la siguiente CSS en nuestra página de demostración conseguimos este nuevo ejemplo [http://www.positioniseverything.net/explorer/sidepages/

msie-lineheight-replaced-element-demo-01-hack.html], que pone de nuevo todo en su sitio.

/* Holly Hack: Hide From IE5/Mac \*/

• html img { margin: 45px 0; vertical-align: middle; }
• html input { margin: 39px 0; vertical-align: middle; }

/* Holly Hack: End Hide From IE5/Mac */

El margen de arriba y de abajo simula el espacio que necesita IE/Win. Sus valores se calculan restándole la altura del elemento a la altura de la línea y dividiéndolo por dos. La propiedad vertical-align se necesita para posicionarlo correctamente.

Finalmente, usamos el hack oculto para prevenir que IE/Mac lo aplique también.

VARIAS NOTAS:

Usar un alto de línea tan ridículamente grande puede ser raro.

De cualquier manera, este bug aun se puede apreciar - aunque menos - cuando se usa un tamaño de fuente más común, alto de línea y elementos reemplazables pequeños (como emoticones, por ejemplo).

Durante todo el ejemplo se usan píxeles para definir tamaños de fuente y altos de línea y medir las distancias para hacerlo más simple.

No importa que tipo de unidad se use para definir el alto de línea.

No importa si el tamaño del texto está definido.

CONCLUSIÓN:

Otro bug extraño. Afortunadamente, el bug no afecta a la distribución de manera terrible - sólo molesta si eres perfeccionista.

Me hubiese encantado concluir este ejemplo con un arreglo real.

Quizá algún día - hasta entonces ahí queda la cuestión.

traducción de maria martinez - http://www.limalimon.com.es