Se dice que tropezar 2 o 3 veces en la misma piedra es cosa de humanos, en mi caso ya me he tropezado decenas de veces con el problema del margen duplicado en las versiones 5 y 6 de Internet Explorer.

La cuestión es que siempre pierdo tiempo pensando en la razón del problema, luego ya se alumbra la bombilla y me digo… Una vez más Internet Explorer esta metiendo la pata y por obra y gracia me duplica el margen de un elemento en bloque flotado.

Definición del problema

#nav a {
   display: block;
   float: left;
   margin-left: 1.2em;
}

El código es sencillo, un elemento a dispuesto como bloque, flotado a la izquierda y con un margen izquierdo de 1.2em.

El resultado en Firefox, Opera, o cualquier otro navegador (más o menos moderno y decente):

Pero curiosamente en Internet Explorer versión 6, 5.5 y probablemente anteriores, tenemos este otro resultado donde parece que el navegador nos duplica el valor del margen (izquierdo o derecho) del elemento bloque que estamos flotando:

Resolución del problema

#nav a {
   display: inline;
   float: left;
   margin-left: 1.2em;
}

Por suerte el uso de display: inline; hace que no sea necesario alterar nuestro diseño y que tampoco tengamos que recurrir a complejos hacks CSS (véase modelo del cuadro).