Использовать двойные классы в IE6 CSS? - PullRequest
Новая
       32

Использовать двойные классы в IE6 CSS?

23 голосов
/ 23 ноября 2008

есть ли способ заставить 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 просто игнорирует Правило клика.

Конечно, я мог бы переписать свой CSS и иметь собственные правила для .MenuButtonOrange
и тому подобное (и это, вероятно, заняло намного меньше времени, чем задание этого вопроса; -),
но, черт возьми, это так непривлекательно и веб 0,9 ...

Ура!

Ответы [ 3 ]

39 голосов
/ 23 ноября 2008

IE6 не поддерживает несколько селекторов классов. Причина, по которой вы видите изменение в классе Orange, заключается в том, что IE6 интерпретируется как a.MenuButton.Orange как 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.

17 голосов
/ 07 января 2010

Скрипт Дина Эдвардса IE7 добавляет поддержку нескольких классов для IE6. Смотри http://code.google.com/p/ie7-js/

7 голосов
/ 23 ноября 2008

Если я использую (как я написал в вопросе) правила, относящиеся к тегам, например .LeftContent a.MenuButton.Orange, это работает ...

Соответствует им, только если классы в селекторе находятся в том же порядке, что и классы в элементе.

Это не совсем так. IE6 (и IE7 в режиме Quirks) запоминает только один класс на каждую часть селектора. Если вы напишите два, второй переопределяет первый. Таким образом, «a.MenuButton.Orange» фактически идентичен «a.Orange».

Таким образом, пока нельзя избегать множественных селекторов классов.

...