Hack CSS para Internet Explorer 6 y 7
Explorer… que os tengo que decir del dichoso Explorer… pues que para los diseñadores gráficos es un verdadero “enemigo”. Digo “enemigo” porque nos hace trabajar y rompernos la cabeza más de la cuenta.
Tenemos unos cuantos hacks en css que nos pueden hacer la vida un poco mas fácil y que nuestros diseños se vean igual en Firefox como en Explorer.
1. Un hack conocido es el de colocar un asterisco delante de la propiedad CSS y así sólo será reconocida por Internet Explorer 6 y 7. En este ejemplo podemos ver que todos los navegadores (Firefox, Safari, Opera, etc) se verá el fondo blanco y en Explorer 6 y 7 se verá de color negro.
body {
background: #fff; /* Todos los navegadores */
*background: #000; /* IE6 e IE7 */
}
2. Otra opción es el uso de !important que también se puede utilizar para diferenciar los estilos css y es aceptado por Firefox, Explorer 7 y los diferentes navegadores, pero no por Explorer 6.
Así que, IE6 no utilizará las propiedades con !important. Este hack si que valida el css.
body {
background: #fff !important; /* Firefox, IE7 y los demás */
background: #000; /* IE6 y anteriores */
}
3. Podemos combinar los tres posibles hacks para dar la misma propiedad a 3 navegadores diferentes.
body {
background: #fff !important; /* Firefox y los demás */
*background: #000 !important; /* Sólo IE7 */
*background: #ccc; /* Sólo IE6 */
}
