css - hack - internet explorer media query

¿Utiliza clases dobles en IE6 CSS?

Question

¿Hay alguna manera de hacer que IE6 comprenda las clases dobles, digamos que tengo un MenuButton de clase con una clase de color y posiblemente una clase cliqueada? me gusta :

.LeftContent a.MenuButton {..general rules..}  
.LeftContent a.MenuButton.Orange {..sets background-image..}  
.LeftContent a.MenuButton.Clicked {...hum ta dum...}

Ahora, IE6 entiende <a class="MenuButton Orange"> , pero al agregar <a class="MenuButton Orange Clicked"> , como <a class="MenuButton Orange Clicked"> , IE simplemente ignora la regla <a class="MenuButton Orange Clicked"> .

Por supuesto, podría reescribir mi CSS y tener mis propias reglas para .MenuButtonOrange
y tal (y probablemente tomó mucho menos tiempo que hacer esta pregunta ;-),
pero bueno, es tan poco atractivo y Web 0.9 ...

¡Aclamaciones!

Answer 1

Si uso (como escribí en la pregunta), reglas específicas de la etiqueta, como .LeftContent a.MenuButton.Orange, funciona ...

Solo coincide con ellos si las clases en el selector están en el mismo orden que las clases en el elemento.

Esto no es del todo cierto. IE6 (e IE7 en el modo Quirks) solo recuerda una clase por parte del selector. Si escribe dos, el segundo anula el primero. Entonces ''a.MenuButton.Orange'' es idéntico en efecto a ''a.Orange''.

Por lo tanto, los selectores de clases múltiples todavía deben evitarse por el momento.

Answer 2

IE6 no es compatible con múltiples selectores de clase. La razón por la que ve un cambio con la clase Orange es porque a.MenuButton.Orange es interpretado por IE6 como a.Orange .

Recomiendo estructurar tu marcado de tal manera que puedas evitar esto:

<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>

Al agrupar por un ancestro más específico, puede crear una variación con las clases delimitadas por ese antecesor (en este ejemplo navmenu ):

.leftcontent .navmenu a { /* ... basic styles ... */ }
.leftcontent .navmenu a.orange { /* ... extra orange ... */ }
.leftcontent .navmenu a.clicked { /* ... bold text ... */ }

No es tan bueno como varias clases, pero lo he usado para evitar la falta de soporte en IE.

Answer 3

La secuencia de comandos IE7 de Dean Edwards agrega soporte de múltiples clases para IE6. Ver http://code.google.com/p/ie7-js/