Anoten un error más de despliegue por parte de IE6, por si no se han convencido de que este browser ha sido uno de los peores de la historia de la informática de todos los tiempos. Este es un problema muy específico pero habitual que involucra cajas flotantes (por eso lo habitual) y la definición de su margen.

Cuando defines un float para una caja contenedora hacia un lado y luego le das un margin en esa misma dirección, lo que hace IE6 es simplemente duplicarla. Así nomás, sin pedir permiso.

[Ver ejemplo (en IE6).][1]{.verejemplo}

Bueno el HTML y CSS para este ejemplo será bastante básico:

#caja {<br />
      float: left;<br />
      margin-left: 100px;<br />
}

Para esta #caja, lo que se hizo fue darle un float: left; y un margin-left: 100px; Pero IE6 lo que hace es interpretar 200px a esa caja de margin-left. Quién lo entiende…

Pero bueno, la idea es darle una solución a esa gracia de browser (y no mediante un hack). Para corregirlo, es sólo agregar un display: inline; a #caja y todo se resuelte.

#caja {<br />
      float: left;<br />
      margin-left: 100px;<br />
      display: inline;<br />
}

[Ver ejemplo final (IE6)][2]{.verejemplo}

[1]: http://www.csslab.cl/ejemplos/float_margin/ej1.html “Enlace en CSSLab para “Ver ejemplo 1"” [2]: http://www.csslab.cl/ejemplos/float_margin/ej2.html “Enlace en CSSLab para “Ver ejemplo Final””