Margen duplicado en IE6, IE5

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:
Imagen con margen duplicado

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).

One response to “Margen duplicado en IE6, IE5

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *