IE6上的removeAttr / addClass问题

时间:2011-11-06 10:48:03

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

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

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

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

我试过了:

  • !important css statement
  • 使用background-position-xbackground-position-y

有人知道解决方法吗?

2 个答案:

答案 0 :(得分:6)

与脚本无关,这是一个简单的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>

答案 1 :(得分:0)

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