IE中多类CSS继承问题

Question

我有一个名为“.spr”的类（用于图像精灵）和许多更改宽度、高度和背景位置属性以显示精灵的各个部分的类。

我还有“.on”类来在“开”或“关”状态下显示的图像之间切换。

问题是，在 IE 中，应与某个类关联的“on”类被应用于没有该关联类（而是不同的类）的按钮。

屏幕截图：

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; }

尽你所能看，IE9 将该类解释

.spr.radiobutton.on 

为

.spr.on

and ，因为它稍后出现在样式表中，因此覆盖 的属性，

.spr.burst.on

即使

.spr.burst

没有该类

.radiobutton

如何在 IE 中正确应用这些复合样式？

Answer 1

如果您的页面没有正确的文档类型声明，IE9 将进入怪异模式并像 IE5/IE6 一样对待链式类选择器： 它只会读取最后一个类并相应地应用规则。

因此，选择器 .spr.radiobutton.on 实际上被解释为 .on （而不是 .spr.on），覆盖它认为也只有 .on 选择器的早期规则。

只需给您的文档提供一个文档类型声明，IE9 就会按预期运行。