El navegador Internet Explorer 7 y sus versiones anteriores incluyen decenas de errores relacionados con CSS. La mayoría de esos errores se pueden solucionar con trucos y técnicas que aprovechan otros errores o características del navegador. Además, muchos errores se solucionan gracias a la propiedad hasLayout de Internet Explorer.
En efecto, muchas soluciones de los errores de Internet Explorer consisten en "forzar a un elemento a que tenga un layout". El motivo es que para mostrar los elementos de una página, el navegador Internet Explorer divide a todos los elementos en dos grupos:
- Los elementos cuyo tamaño y posición dependen de su elemento contenedor.
- Los elementos que establecen su propio tamaño y posición.
La mayoría de elementos de una página son del primer tipo, ya que sus elementos contenedores (normalmente el elemento <body>) determinan su tamaño y posición. Los elementos del segundo tipo son los que Internet Explorer considera que tienen un layout.
Los elementos HTML que por defecto tienen un layout en Internet Explorer son:
<html>,<body><table>,<tr>,<th>,<td><img><hr><input>,<button>,<select>,<textarea>,<fieldset>,<legend><iframe>,<embed>,<object>,<applet><marquee>
No obstante, algunas propiedades CSS provocan que el elemento tenga un layout y por tanto, activan la propiedad hasLayout. La siguiente tabla muestra todas las propiedades CSS y valores que hacen que un elemento tenga un layout:
| Propiedad | Valores que activan la propiedad hasLayout | Comentarios |
|---|---|---|
position |
absolute, fixed |
fixed sólo en Internet Explorer 7 |
float |
left, right |
|
display |
inline-block |
|
width |
Cualquier valor que no sea auto |
|
min-width |
Cualquier valor | Sólo en Internet Explorer 7 |
max-width |
Cualquier valor | Sólo en Internet Explorer 7 |
height |
Cualquier valor que no sea auto |
|
min-height |
Cualquier valor | Sólo en Internet Explorer 7 |
max-height |
Cualquier valor | Sólo en Internet Explorer 7 |
zoom |
Cualquier valor que no sea normal |
|
writing-mode |
tb-rl |
|
overflow |
hidden, scroll, auto |
Sólo en Internet Explorer 7 |
Las propiedades zoom y writing-mode no se definen en ningún estándar de CSS porque son propietarias del navegador Internet Explorer. Si se utilizan estas dos propiedades, la hoja de estilos no pasa satisfactoriamente el proceso de validación.
Para quitar el layout a un elemento, es necesario establecer el valor por defecto de todas las propiedades de la tabla anterior que hayan sido modificadas:
width: auto,height: automax-width: auto,min-width: autoposition: staticfloat: noneoverflow: visiblezoom: normalwriting-mode: lr-tb
Utilizando alguna de las propiedades CSS anteriores se han ideado numerosas soluciones para forzar a que un elemento tenga un layout. Uno de los trucos más conocidos desde hace muchos años es el famoso Holly hack que soluciona un problema con un elemento posicionado de forma flotante aplicando la siguiente regla:
.selector {
height: 1%;
}En el navegador Internet Explorer 6 se puede utilizar el truco del guión bajo y la propiedad height para forzar a un elemento a que tenga layout:
.selector {
_height: 1%;
}En Internet Explorer 7 se puede utilizar la propiedad min-height utilizando cualquier valor, incluso el 0:
.selector {
min-height: 0;
}Otra propiedad muy utilizada en Internet Explorer 7 es zoom, aunque no es una propiedad estándar de CSS:
.selector {
zoom: 1;
}En las próximas secciones se presentan algunas técnicas que requieren forzar a que un elemento tenga layout en Internet Explorer. Si quieres acceder a decenas de técnicas que hacen uso de la propiedad hasLayout, puedes consultar el artículo On having layout. Microsoft también ha publicado un artículo llamado HasLayout Overview que explica la propiedad hasLayout y sus implicaciones en el diseño de sitios web.