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