IE6 上的 removeAttr / addClass 问题答案

【问题标题】：removeAttr / addClass issue on IE6IE6 上的 removeAttr / addClass 问题
【发布时间】：2011-11-06 23:20:04
【问题描述】：

有人问过这个问题here，但问题没有得到解决。

请在 IE6 上查看此 jsfiddle：http://jsfiddle.net/RnsxM/2/

基本上，精灵图像（未修复 png）在 IE6 中不会正确更新。该类似乎已应用（并且可以在没有 javascript 的情况下工作）但组合 removeAttr + addClass 似乎已损坏。

我试过了：

!importantcss声明
使用background-position-x 或background-position-y

有人知道解决方法吗？

【问题讨论】：

标签： javascript jquery css image internet-explorer-6

【解决方案1】：

与脚本无关，这是一个简单的 CSS 损坏。 IE6 的选择器引擎中的某些东西无法处理在单个样式表上有两个#id.class 规则和相同#id 的想法。这个较短的示例演示：

<style type="text/css">
    #sprite.pos1 { background: red; }
    #sprite.pos2 { background: yellow; }
</style>
<div id="sprite" class="pos2">Hello</div> <!-- White in IE6! -->

您可以通过将 ID 和类放在不同的元素上来避免这种情况，或者只是将样式表一分为二：

<style type="text/css">
    #sprite.pos1 { background: red; }
</style>
<style type="text/css">
    #sprite.pos2 { background: yellow; }
</style>
<div id="sprite" class="pos2">Hello</div>

【讨论】：

非常感谢我通过使用父元素 id #parent .posX解决了它

【解决方案2】：

@bobince 是对的。我创建了一个 jsfiddle 并在 IEtester 中运行它，我看到 IE6 不接受选择器：

#sprite.pos1

但接受：

.pos1

我认为基本上是这样，我建议你为 IE6 制作一个替代选择器，如下所示：

#sprite.pos1 { background-position: -120px 0; }
.pos1 { _background-position: -120px 0; }
#sprite.pos2 { background-position: -240px 0; }
.pos2 { _background-position: -240px 0; }

【讨论】：