IExplorer y hasLayout

En IExplorer, en algunos casos hay elementos de HTML que no parecen comportarse correctamente respecto a los estilos. Esto puede deberse a que al elemento en cuestión IE no le asigna un layout. En esos casos, basta con añadir una propiedad (un estilo) que asigne un layout.

Por defecto, los siguientes elementos tienen layout:

• html, body
• table, tr, th, td
• img
• hr
• input, button, select, textarea, fieldset, legend
• iframe, embed, object, applet
• marquee

Para elementos que no tiene layout por defecto, basta con asignarles

height: 1% 

que se convertirá en

height: auto

salvo que el parent tenga una height propia.

Para evitar problemas con futuras versiones, podemos utilizar comentarios condicionales de explorer para distinguir IE6 de IE7+ y asignar la clase gainlayout a los elementos que nos interese:


<!--[if lt IE 7]><style>
/* style for IE6 + IE5.5 + IE5.0 */
.gainlayout { height: 0; }
</style><![endif]-->

<!--[if gte IE 7]><style>
.gainlayout { zoom: 1; }
</style><![endif]-->
En este caso, utilizamos la propiedad zoom para simular el mismo efecto sobre IE7+.

Para más información sobre comentarios condicionales, http://msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx