Изменение класса не приводит к применению правил нового класса в IE6?
У меня есть одно изображение с 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 в веб-инструменте разработчика MS. Итак, jQuery работает. Класс применяется, но видимых изменений не происходит.
Я здесь как бы в тупике ... Помоги мне, Crackoverflow ... ты моя единственная надежда ...
Обновлено: Что касается className и setAttribute ... класс меняется. attr ("class", cur) работает. Однако после изменения класса результирующие правила не применяются визуально ... но изменение класса происходит.
Обновлено еще раз: Что касается методов jQuery, специфичных для класса: изначально они были у меня в коде, и результат был таким же. Опять же, проблема не в том, что класс не применяется к элементу ... это было подтверждено. дело в том, что когда класс находится в элементе, по какой-то причине элемент не следует правилам CSS, установленным для этого класса ...
Ответы 5
Используйте свойство className DOM. setAttribute() полностью сломан в IE <8.
Угадайте один: ошибка рендеринга 1
Убедитесь, что вы активировали hasLayout для элементов. Вы можете сделать это, указав им высоту или, если это невозможно, тогда position = relative & 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 в значительной степени достигается с помощью старых добрых методов проб и ошибок, грубой силы, предположений и щедрого терпения.
Я столкнулся с похожей проблемой; было применено имя класса, цвет текста изменился, как и ожидалось, однако фоновые изображения обновились не сразу. После того, как я зависал над фактическим элементом или выходил из него, фон обновлялся.
Оказался конфликт с библиотекой DD_belatedPNG.
Не могли бы вы подробнее рассказать об этом? Я столкнулся с той же проблемой, и я также использую библиотеку DD_belatedPNG, поэтому я предполагаю, что это та же проблема, что и у вас. Вам вообще удалось это исправить? Если да, то как?
Ничего, разобрал сам. На случай, если кто-то еще столкнется с этим, я написал об этом небольшую запись в блоге: iandevlin.com/blog/2010/04/webdev/…
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;}
У меня была такая проблема в ie7.
в основном я менял класс родительского элемента, чтобы скрыть одни элементы и показать другие. класс изменился, и элемент, который отображался при загрузке страницы, скрывался и отображался нормально, но элемент, который не отображался при загрузке страницы, никогда не отображался.
Я заметил, что это происходило только в некоторых сценариях (бог знает, как это предсказать).
Мое решение заключалось в том, чтобы скрыть элементы только после загрузки страницы с помощью javascript.
ре. className vs. setAttribute, проблема может заключаться в ошибке в IE, которая на самом деле не меняет класс элемента при установке атрибута класса, только когда вы вызываете методы, специфичные для класса. Тем не менее, методы класса jQuerys (например, addClass) используют это.