hasLayout y los problemas de Internet Explorer con CSS

Jueves, 20 de Abril de 2006 a las 19:53 CET
Guardado en: CSS
Tags: bugs, css, desarrollo web, internet explorer, xhtml

Si alguna vez has tratado de jugar con el CSS al hacer una página Web, te habrás dado cuenta de lo increíblemente potente que es. Pero seguro que también habrás notado otra cosa: que Internet Explorer hace lo que le da la gana. ¿Me equivoco?

Pues bien, si alguna vez has sentido la frustración correr por tus venas debido a que tu maquetación no se ve como debe, o a que el elemento que acabas de dejar tan bonito se va al garete cuando compruebas tu creación en ese navegador, deberías intentar tener en cuenta y tratar de comprender lo que os voy a contar a continuación.

Cuando algo te falle en Internet Explorer, recuerda esta palabra: hasLayout, o simplemente layout. ¿Y por qué tienes que recordar esta palabra? Porque es la base de muchos de los problemas de Internet Explorer con el CSS. Pero antes de seguir con todo esto, ¿qué diablos es el hasLayout?

Nuestro querido Microsoft, con su gran manera de hacer las cosas, creó una especie de propiedad interna que determina cómo se dibujan los elementos (X)HTML en la ventana del navegador, (Internet Explorer), cómo interactuan con los demás, cómo reaccionan ante determinados eventos, etc. Esta propiedad es nuestro famoso hasLayout. Se entiende esta propiedad como una propiedad de tipo boolean, es decir, que puede tener dos valores, true, o false. Algunos elementos tienen el hasLayout en true por defecto, esto quiere decir que tienen layout, mientras que otros no. Y ahora algo importante, se le puede dar layout a los elementos que no lo tienen mediante algunas propiedades CSS.

Como hemos dicho, el hasLayout es la base de mucho de los problemas de Internet Explorer, por lo que es importante conocerlo y saber cómo darle layout a un elemento, saber si lo tiene por defecto, etc.

Como ya he dicho, existen una serie de elementos que tienen layout por defecto. Estos elementos son:

<html>, <body>
<hr>
<img>
<table>, <tr>, <th>, <td>
<marquee>
<input>, <textarea>, <select>, <button>
<iframe>, <applet>, <embed>, <object>

El resto de elementos (X)HTML de los que disponemos, por defecto no tienen layout, pero podemos hacer que lo tenga aplicándole alguna de las propiedades CSS que comento a continuación:

float:left; o float:right;: Bien conocidos son ya los bugs de Internet Explorer con respecto a los elementos flotados
position: absolute;: Con este tipo de posicionamiento, el elemento al que se la apliquemos ganará layout
width o height: Cualquier valor dado a estas propiedades hará que el elemento tenga layout
display: inline-block;: Muy útil cuando queremos darle layout a un elemento en línea
zoom con cualquier valor, o writing-mode: tb-rl;: Ambas son propiedades propietarias de Microsoft, así que si queréis usarlas, tened en cuenta que no validarán

Después de repasar todo esto, mi consejo es el siguiente: cuando tengáis algún problema con vuestro CSS en Internet Explorer, tratad de darle layout al elemento que os está fallando, (un height:1%; para ese elemento en vuestra hoja de estilos para Internet Explorer colocada usando comentarios condicionales puede hacer maravillas). Y en el caso de que el elemento que falla tenga layout porque le habéis colocado una propiedad CSS que se la otorga, tratad de quitársela y conseguir el mismo efecto CSS mediante otros métodos.

Si después de probar esto la cosa sigue dando problemas, entonces podéis pasar a buscar algún hack específico o cualquier cosa de estas. Pero no perdéis nada por probar antes lo del hasLayout, y os puede sacar de más de un aprieto.

Por cierto, si queréis leer más sobre el hasLayout de Internet Explorer, no olvidéis pasar por el artículo On Having Layout: The concept of hasLayout in IE/Win, el mejor recurso que he podido encontrar para comprender esta curiosa propiedad, "madre" de la mayoría de problemas de CSS en Internet Explorer.

Avisos, (trackbacks)

#561 - El Viernes 21 Abril 2006 a las 03:56 CET, en "Kuro / Jorge Cocompech" se escribió:

Entendiendo la propiedad HasLayout en IE

Lean esta anotación (vía Armonía) ...

Los avisos para este post están cerrados.

Comentarios

[ Hacer un Comentario ]

#560 - Escrito por stan, el Jueves 20 Abril 2006 a las 22:41 CET.

si lo he utilizado, mas no sabia que se llamada asi.

Es siempre un dolor de cabeza el internet explorer, haber que tan bien viene el soporte del 7 con los estandares.

Muy buen articulo, ya ha sido impreso :)
#564 - Escrito por Juan G. Hurtado, el Viernes 21 Abril 2006 a las 08:05 CET.

Con IE7 la cosa mejorará un poco, (yo diría que bastante), pero creo que seguirán existiendo muchos "problemas", muchas cosas mal implementadas, muchos "bugs", y todas estas cosas a las que estamos tan acostumbrados. No sólo con IE, sino también con todos los demás.
#604 - Escrito por Eriwen, el Viernes 5 Mayo 2006 a las 12:00 CET.

Quiero que sepas que me ha gustado mucho, el tono delartículo, la explicación...

Mi más sincera enhorabuena
#605 - Escrito por Juan G. Hurtado, el Viernes 5 Mayo 2006 a las 12:33 CET.

Muchas gracias. A veces pienso que no sé explicarme bien cuando escribo artículos de este tipo, pero celebro que te guste.
#720 - Escrito por annaiss, el Martes 27 Junio 2006 a las 15:23 CET.

hola soy annaiss de barcelona y no consigo aprender informatica, soy malisima, no la entiendo y cada dos por tres la estoy pifiando y luego no se arreglarlo, ahora tengo un problema, creo que he borrado el internet explorer y ahora estoy con microsoft, que internet descargo ahora????? que lio!!!!!
#983 - Escrito por Roberto Ochoa, el Viernes 4 Agosto 2006 a las 18:36 CET.

Hola, tengo un problema con un div, tengo una franja con imagen, la imagen mide 9px de alto, al meterla en un div con height de 9px me toma muy bien en firefox, zafari pero no en IE6.0 , me di cuenta que si pongo menos de 19px el IE de todas formas se va hasta 19, si pongo mas no hay ningun problema, alguien sabria la razon de esto????

Saludos