internet-explorer - only - internet explorer media query

problema de herencia de CSS de clase múltiple en IE

Question

Tengo una clase llamada ".spr" (para un sprite de imagen) y muchas clases que alteran los atributos de ancho, altura y posición de fondo para mostrar varias partes del sprite.

También tengo clases ".on" para alternar entre las imágenes que aparecen en estado "encendido" o "apagado".

El problema es que, en IE, la clase "on" que debería asociarse con una cierta clase se está aplicando a un botón que no tiene esa clase asociada (sino una diferente).

Captura de pantalla:

El CSS:

.spr.burst.been {background-position: -241px -89px;
  .spr.burst.on {
    background-position: -301px -89px !important; }

  .spr.radiobutton {background-position: -250px -249px; }
    .spr.radiobutton.on {
background-position: -250px -218px;
      border: 3px dashed red; }

Como puede ver, IE9 interpreta la clase

.spr.radiobutton.on 

como

.spr.on

y, como viene más adelante en la hoja de estilos, anula las propiedades de

.spr.burst.on

aunque

.spr.burst

no tiene la clase

.radiobutton

¿Cómo puedo aplicar correctamente estos estilos compuestos en IE?

Answer 1

Si su página no tiene una declaración de tipo de documento adecuada, IE9 pasará al modo peculiar y tratará a los selectores de clase encadenados exactamente como lo hace IE5 / IE6: solo leerá la última clase y aplicará las reglas en consecuencia.

Como resultado, el selector .spr.radiobutton.on realmente se interpreta como simplemente .on (en lugar de .spr.on ), anulando la regla anterior que cree que también tiene el selector .on .

Simplemente dele a su documento una declaración de tipo de documento e IE9 se comportará como se espera.