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

并且,因为它稍后出现在样式表中,所以会覆盖它的属性

.spr.burst.on

即使

.spr.burst

没有班级

.radiobutton

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

Answer 1

如果您的页面没有正确的doctype声明,IE9将进入怪癖模式并处理与IE5/IE6完全相同的链式类选择器:它只会读取最后一个类并相应地应用规则.

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

只需为您的文档提供doctype声明,IE9就会按预期运行.