Question

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

请在IE6上看到这个jsfiddle：http://jsfiddle.net/RnsxM/2/

基本上，精灵图像（不是固定的png）在IE6中无法正确更新。这个类似乎是应用的（并且没有javascript工作）但是combinaison removeAttr + addClass似乎坏了。

我试过了：

!important css statement
使用background-position-x或background-position-y

有人知道解决方法吗？

Answer 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>

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

IE6上的removeAttr / addClass问题

2 个答案: