Смена класса не приводит к применению правил нового класса в IE6?

Question

У меня есть одно изображение с 9 различными состояниями и соответствующими правилами положения фона, настроенными как классы для отображения различных состояний. Я не могу использовать псевдо-селектор: hover, потому что изменяемое фоновое изображение - это не тот элемент, над которым наведен курсор. Я определил классы следующим образом:

#chooser_nav {width:580px; height:38px; background:transparent url(/assets/images/chooser-tabs.jpg) 0 0 no-repeat; margin-left:34px;}
#chooser_nav.feat {background-position:0 0;}
#chooser_nav.inv {background-position:0 -114px;}
#chooser_nav.bts {background-position:0 -228px;}
#chooser_nav.featinv {background-position:0 -38px;}
#chooser_nav.featbts {background-position:0 -76px;}
#chooser_nav.invfeat {background-position:0 -152px;}
#chooser_nav.invbts {background-position:0 -190px;}
#chooser_nav.btsfeat {background-position:0 -266px;}
#chooser_nav.btsinv {background-position:0 -304px;}

Затем, используя jQuery, у меня есть ряд правил наведения, основанных на предыдущем событии щелчка (здесь-не объявленная переменная "cur" правильно объявлена ​​в другом месте):

  $("#featured_races a").hover(function(){
    cur == "feat" ? $("#chooser_nav").attr("class", cur) : $("#chooser_nav").attr("class", cur+"feat");
  }, function(){
    $("#chooser_nav").attr("class", cur);
  });

  $("#invitational_races a").hover(function(){
    cur == "inv" ? $("#chooser_nav").attr("class", cur) : $("#chooser_nav").attr("class", cur+"inv");
  }, function(){
    $("#chooser_nav").attr("class", cur);
  });

  $("#behind_the_scenes a").hover(function(){
    cur == "bts" ? $("#chooser_nav").attr("class", cur) : $("#chooser_nav").attr("class", cur+"bts");
  }, function(){
    $("#chooser_nav").attr("class", cur);
  });

Итак, в браузерах Moz и WebKit это работает нормально. Классы применяются, и фоновое изображение изменяется соответственно. Работает и в IE7. Однако в IE6 фоновое изображение никогда не меняется. Классы применяются соответствующим образом, я проверил это с помощью DOM viewer в инструменте MS web dev. Итак, jQuery работает. Класс применяется, но никаких видимых изменений не происходит.

Я тут немного озадачен ... Помоги мне, Crackoverflow ... ты моя единственная надежда ...

EDIT: Что касается className против setAttribute ... класс меняется. attr ("класс", cur) работает. Однако после изменения класса полученные правила не применяются визуально ... но изменение класса происходит.

РЕДАКТИРОВАТЬ 2: Что касается специфичных для класса методов jQuery: у меня они изначально были в коде, и результат был таким же. Опять же, проблема не в том, что класс не применяется к элементу ... это было подтверждено. это то, что когда класс находится на элементе, по какой-то причине элемент не следует правилам CSS, установленным для этого класса ...

Answer 1

Угадай одно: ошибка рендеринга 1

Убедитесь, что вы активировали hasLayout для элементов. Вы можете сделать это, задав им высоту или, если это не возможно, то position = относительный & z-index = 1, также вызовет hasLayout. Попробуйте это для этих элементов + подозрительные родительские элементы.

/* fix hasLayout bug for IE */
div#id {
  _height : 0;
  min-height : 0;
}

Угадай два: рендеринг ошибка 2

Иногда может потребоваться больше вычислений рендеринга, чем решено браузером. Вы можете дать DOM хороший удар, коснувшись класса тела:

document.body.className += '';

Угадай три: проблемы с селектором

IE6 не поддерживает несколько селекторов классов, и, возможно, ID + Class, за исключением некоторых случаев.

div.class1.class2 {
  border : 1px solid red; /* this will normally not work in IE6 */
}

В данный момент у меня нет IE для тестирования, и я не могу вспомнить, что погода # id.class должна работать (я так думаю), но я обычно избегаю подобных вещей для IE6. Возможно, вам придется изменить ваши селекторы.

Вам нужно будет настроить тест, чтобы увидеть, работают ли ваши селекторы вообще.

Варианты, которые могут работать:

.inv#chooser_nav { background-position : 0 -114px; }

Или вам может потребоваться выделить элемент по родительскому элементу:

#someparent .inv { background-position : 0 -114px; }

IE6 также имеет проблемы с наведением, что также может быть фактором.

Надеюсь, это поможет. Извините, я не могу быть более определенным, но преодоление причуд IE6 в основном делается с помощью старых добрых методов проб и ошибок, грубой силы, догадок и щедрой помощи терпения.

Answer 2

IE6 имеет проблемы с используемыми вами "двойными" правилами CSS.

#chooser_nav.bts {background-position:0 -228px;}

Вы выбираете элемент с идентификатором chooser_nav и class bts. Эта (очень полезная) конструкция просто не надежна в IE6. Если вы можете удалить идентификатор-идентификатор или указать вместо него родительский элемент, это должно решить вашу проблему:

.bts {background-position:0 -228px;}

или

#chooser_nav_parent .bts {background-position:0 -228px;}

Answer 3

У меня была эта проблема в ie7.

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

я заметил, что это произошло только в некоторых сценариях (бог знает, как это предсказать).

Мое решение состояло в том, чтобы скрыть элементы только после загрузки страницы с помощью javascript.

Answer 4

Я столкнулся с подобной проблемой; имя класса было применено, текстовое кольцо изменилось, как и ожидалось, однако фоновые изображения не обновились сразу. После того, как я завис над или вне фактического элемента, фон был обновлен.

Оказалось, что конфликт с библиотекой DD_belatedPNG.

Answer 5

Использовать className свойство DOM. setAttribute() совершенно не работает в IE <8. </p>