IE中的多类CSS继承问题

Posted 2023-03-06

【中文标题】IE中的多类CSS继承问题

【英文标题】：multiple-class CSS inheritance problem in IE

【发布时间】：2011-08-29 02:31:56

【问题描述】：

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

我还有“.on”类可以在“on”或“off”状态的图像之间切换。

问题在于，在 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 中正确应用这些复合样式？

【问题讨论】：

你有文件可以试试这个吗？

【参考方案1】：

如果您的页面没有正确的 doctype 声明，IE9 将进入 quirks 模式并像 IE5/IE6 一样对待链式类选择器：it'll only read the last class 并相应地应用规则。

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

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

【讨论】：

总是添加一个文档类型声明，不管浏览器。 ;)

只是让我头疼不已……谢谢！ IE9 对回退到 IE6 选择器解析非常悲观>.

正是我想要的！几个小时以来，我一直在想为什么 ie9 和 ie6 一样 cccccr@p！