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: auto
  • max-width: auto, min-width: auto
  • position: static
  • float: none
  • overflow: visible
  • zoom: normal
  • writing-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;
}

?

Class Auto CMS This class can be used to generate a basic content site. It can present a form in an administration page protected with a password to let the admin...
Estudio sobre el comportamiento de Hombres Versus Mujeres en Redes Sociales Los hombres y mujeres no tenemos el mismo comportamiento en la red. Nuestras diferencias pueden parecer sutiles, pero se acentúan en el uso de las pla...
Actualización Ambar llega a los Windows Phone de Nokia Si tienes un Nokia Lumia con sistema operativo Windows Phone 8 (WP8), seguramente recibirás la actualización llamada: Ambar, en cualquier momento. ...
WordPress 3.3 que tiene de nuevo? En un nuevo paso que nos aproxima a la llegada definitiva de WordPress 3.3 acaba de ser liberado la última beta de la nueva versión de este CMS. Wo...
Estudio sobre el impacto de Internet en la economía española Si hay un campo de la economía española que puede escapar de la mala situación del país (o al menos bordearla) ese es Internet. El campo en el que se ...
Twitter con mejor soporte para Multimedia El equipo de trabajo de Twitter acaba de anunciar algunas mejoras interesantes en lo que hasta el momento era para muchos uno de los principales handi...
Pronto Facebook te dirá a quien de tus amigos ignorar Frecuentemente los usuarios de Facebook se molestan con las publicaciones agresivas, ofensivas, sin sentido o tal vez excesivas de algunos de sus ...
RIM anuncia nueva aplicación de Facebook para BlackBerry PlayBook Research In Motion (RIM) anunció hoy Facebook para BlackBerry PlayBook - una nueva aplicación que proporciona las más conocidas características de Fac...
JQuery 1.6.3 liberado JQuery 1.6.3 es la tercera actualización de la última versión liberada de esta librería de funciones JavaScript. Este lanzamiento trae solución a v...
El 75% de las empresas utilizan software libre El uso del software libre parece ser cada vez más una elección tomada por las empresas españolas, de las que, según la Encuesta de Uso de las TIC y Co...