Hack CSS para Internet Explorer 6 y 7

Macgrafic — Tue, 28 Jul 2009 09:29:02 +0000

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 */
}

Macgrafic - Tutoriales de diseño gráfico, InDesign, Photoshop, Freehand, Illustrator y fotografía » ie6

Hack CSS para Internet Explorer 6 y 7