CSS hacks para Internet Explorer 6 y 7

En muchas ocasiones nos encontramos que necesitamos aplicar algún tipo de estilo específico a Internet Explorer 6 o 7, que son los navegadores que menos funcionalidades CSS soportan pero que aún tienen una cantidad elevada de usuarios.

En estos casos, y debido a algunos errores en el funcionamiento del navegador, tenemos la posibilidad de ejecutar un pequeño hack que no afecta al resto.

El sistema es sencillo. Internet Explorer tiene un fallo y es que los atributos de los CSS permiten los símbolos «*» y «_» delante. Tomando de ejemplo este código a continuación, podemos ver algunos detalles:

.fondo {
  background: Green; /* Todos los navegadores */
  *background: Yellow; /* Sólo Explorer 6 y 7 */
  _background: Red; /* Sólo Explorer 6 */
}

¿Qué significaría esto? Pues que, todos los navegadores excepto Internet Explorer sólo leerían la primera línea, que es la única correcta. En el caso de Internet Explorer 8, también sólo leería la primera (las otras dos ya no, porque son erróneas). En el caso de Internet Explorer 7, como lee en orden y prima la última cosa correcta, de las 3 líneas leería hasta la segunda, porque el 7 no entiende la tercera, claro está.

En el caso de Explorer 6 es bastante similar… va leyendo en orden, y como entiende las 3 líneas, se queda con la tercera «porque es la última»… De esta forma, si queremos jugar con algunos pequeños hacks para Internet Explorer 6, 7 y 8 podemos hacerlo mediante este curioso sistema (gracias a los fallos que llevan las versiones anteriores)…