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
