IE 6 crea un doble margin y padding cuando usamos dicha propiedad en dos divs flotantes que caen al lado del otro.
El problema
En este código IE 6 lo leerá incorrectamente y creará doble margin y padding en nuestro elemento:
#global-column-1 {
margin:0 0 0 33px; padding:0 20px 0 0; width:255px; float:left;
}
#global-column-2 {
margin:0 0 30px 30px; width:250px; float:left;
}
La solución
La solución sería utilizar comentarios condicionales para que solo puedan ser vistos por IE 6. Este código que vamos a mostrar a continuación es el mismo de antes pero añadiendole el hack para que “* html #global-column-1″ solo pueda verse en IE 6. “display:inline” corrige el doble spacing en IE 6. El código resultante para corregir el doble margin y padding sería este:
#global-column-1 {
margin:0 0 0 33px; padding:0 20px 0 0; width:255px; float:left; } * html #global-column-1 { display:inline;
}
#global-column-2 {
margin:0 0 30px 30px; width:250px; float:left;
}
Otro truco más a tener en cuenta contra el navegador rebelde de Microsoft…
Vía | DavidWalsh
Puedes recibir gratis más artículos por RSS, Twitter, Facebook o correo electrónico. ¡Muchas gracias por leerme!
Hoy mismo me ha pasado eso, nunca me acuerdo que IE6 es un tanto “especial” y terminas dándole vueltas a todo. Recordé que no pasaba con la versión 7, así que lo actualicé (uso XP en una máquina virtual) y el problema “se fue”. A veces nos comemos la cabeza con el diseño para IE6, pero creo que deberíamos ir dejándolo de lado si no son fallos graves.