Использовать двойные классы в IE6 CSS?
Есть ли способ заставить IE6 понимать двойные классы, скажем, у меня есть класс MenuButton с классом цвета и, возможно, классом, по которому щелкнули мышью; лайк:
.LeftContent a.MenuButton {..general rules..}
.LeftContent a.MenuButton.Orange {..sets background-image..}
.LeftContent a.MenuButton.Clicked {...hum ta dum...}
Теперь IE6 понимает <a class="MenuButton Orange">
, но при добавлении нажал, вроде <a class="MenuButton Orange Clicked">
IE просто игнорирует правило Clicked.
Конечно, я мог бы переписать свой CSS и иметь собственные правила для.MenuButtonOrange
и тому подобное (и это, вероятно, заняло намного меньше времени, чем задание этого вопроса;-),
но, черт возьми, это так непривлекательно и веб 0,9...
Ура!
3 ответа
IE6 не поддерживает несколько селекторов классов. Причина, по которой вы видите изменения с Orange
класс потому что a.MenuButton.Orange
интерпретируется IE6 как a.Orange
,
Я рекомендую структурировать вашу разметку таким образом, чтобы вы могли обойти это:
<div class="leftcontent">
<ul class="navmenu">
<li><a class="menubutton orange" href="#">One</a></li>
<li><a class="menubutton orange clicked" href="#">Two</a></li>
</ul>
</div>
Группируя по более конкретному предку, вы можете создать вариацию с классами, ограниченными этим предком (в этом примере navmenu
):
.leftcontent .navmenu a { /* ... basic styles ... */ }
.leftcontent .navmenu a.orange { /* ... extra orange ... */ }
.leftcontent .navmenu a.clicked { /* ... bold text ... */ }
Это не так хорошо, как несколько классов, но я использовал его, чтобы обойти отсутствие поддержки в IE.
IE7-скрипт Дина Эдвардса добавляет поддержку нескольких классов для IE6. Смотрите http://code.google.com/p/ie7-js/
Если я использую (как я написал в вопросе), правила для конкретных тегов, например.LeftContent a.MenuButton.Orange, это работает...
Он соответствует им, только если классы в селекторе находятся в том же порядке, что и классы в элементе.
Это не совсем так. IE6 (и IE7 в режиме Quirks) запоминает только один класс на каждую часть селектора. Если вы напишите два, второй переопределяет первый. Таким образом, "a.MenuButton.Orange" фактически идентичен "a.Orange".
Таким образом, несколько селекторов класса все еще нужно избегать на данный момент.