RemoveAttr / addClass проблема в IE6

Question

Этот вопрос был задан здесь , но проблема не была решена.

Пожалуйста, посмотрите это jsfiddle на IE6: http://jsfiddle.net/RnsxM/2/

Как правило, изображение спрайта (без фиксированного png) не будет корректно обновляться в IE6. Класс, кажется, применен (и работает без javascript), но комбинация removeAttr + addClass кажется сломанной.

Я пытался:

• !important выписка css
• использование 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! -->

Вы можете избежать этого, поместив идентификаторы и классы в разные элементы или просто разбив таблицу стилей на две части:

<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

@ Бобинс прав.Я делаю 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; }