Basándome en la triste realidad de que Internet Explorer 6 aún sigue vivo, no importa cuánto me esfuerce en ignorarlo, y que mantiene una cuota de mercado superior al 15% entre la comunidad “geek” ^{1, 2} he decidido crear una pequeña recopilación de los problemas más comunes que Internet Explorer presenta a la hora de crear una página HTML.

Esta no pretende ser una “lista definitiva” de todos los bugs en IE6 sino más bien es un mini resumen, ya que como todos sabemos Internet Explorer 6 contiene hasta la fecha 32.642.321 bugs reportados y todos los dias se siguen reportando más

1. Transparencia PNG

El problema: Internet Explorer 6 y anteriores, muestran en color gris las transparencias de los archivos PNG.
Solución: Hay varias soluciones para este problema, la primera de ellas es usar el filtro de Microsoft:

img
{
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);
}

Otra opción es usar el iepngfix.htc aunque personalmente no me dio buenos resultados, funciona bastante bien para construcciones sencillas.

Una alternativa con buenos resultados es el script DD_belatedPNG que teóricamente nos permite usar PNGs en backgrounds y en eventos hover.

2. Double Margin Bug

Problema: El margen izquierdo/derecho de un elemento flotante es duplicado.
Solución: Agregar display:inline a todos los elementos flotantes. Indispensable que esto se haga costumbre!

selector
{
  float:left;
  margin-left:10px;

  /* fix the double margin error */
  display:inline;
}

3. Bicubic Image Scaling

Problema: En Internet Explorer 7 las imágenes que intentemos achicar se verán pixeladas. Esto es debido a que la propiedad de escalado por el método bicubic está deshabilitada por defecto.
Solución: Debemos activarla nosotros desde nuestro CSS indicando que los elementos recibirán ese estilo:

img
{
  -ms-interpolation-mode: bicubic;
}

4. Image Border in links

Esto no es un bug, pero hace doler la cabeza como si lo fuera. El problema es que las imagenes que están dentro de un enlace, se muestran con un borde azul feo. Con esto se lo quitamos:

a img
{
  border: none;
}

5. Empty element height bug

Problema: Elementos vacíos que tienen hasLayout obtienen altura mágicamente.
Solución: Agregar overflow:hidden al elemento.

selector
{
  background: blue;
  width: 100%;
  overflow: hidden;
  height: 0; /* For IE7 */
}

6. Sub-Hover Bug

Problema: No se aplican estilos a los elementos hijos cuando se los llama desde un :hover del padre.
Solución: Agregar zoom:1 al :hover

span
{
  display: none;
}

a:hover span
{
  display: inline;
  zoom:1;
}

7. Min-Height for IE

Problema: No se reconoce la propiedad min-height.
Solución: Aplicar height sólo a IE6.

selector
{
  min-height:500px;
  _height:500px;
}

Algunos consejos

• Siempre usa un css reset
• Todos los elementos flotantes deben tener display:inline y overflow:hidden
• Cuando veas que algo desaparece mágicamente o no se posiciona como corresponde usa zoom:1 esto soluciona muchas cosas
• La cuchara mágica siempre es un buen lugar para probar tu diseño

Continuará…

Si te quedaste con hambre, puedes consultar esta lista de bugs para Internet Explorer.

Personalmente sigo dando un mínimo soporte a IE, de tal manera en que el estilo del sitio se muestre bien y se pueda leer correctamente. Sin embargo efectos como border-radius, opacity, text-shadows, etc, no se ven bien en Internet Explorer pero eso no me quita el sueño.

PD: Pueden dejar un comentario acerca de lo que piensan sobre IE6. Las malas palabras son bienvenidas