
Juntar identificador y clase en IE6
En un proyecto sobre el que estoy trabajando observo que en el maravilloso mundo de IE6 no aparece bien el estilo para el menú de secciones… Intentare ilustrarlo con un ejemplo resumido.
CSS del menú
#nav li a.home { } #nav li a#current.home { }
Internet Explorer 6 e inferiores recelan de los selectores combinados, aquellos donde se une un identificador con una clase. Y esto puede se necesario en el caso de tener varios elementos con estilos diferentes.
XHTML del menú
<ul id="nav"> <li id="active"><a id="current" class="home" href="#">Item one</a></li> <li><a class="projects" href="#">Item two</a></li> <li><a class="contact" href="#">Item three</a></li> </ul>
La solución en la descendencia
Tenemos por un lado el elemento lista (padre) con el identificador #active
que haría la misma función identificativa que #current
y anidado el elemento del enlace (hijo) con su correspondiente clase.
Ejemplo
#nav li#active a.home { }
El caso es que vuelvo a tropezar con este problema habiendo escrito un post sobre lo mismo (Problema combinando selector de ID y clase en IE6) hace relativamente poco tiempo.
¿Por qué el ser humano es el único animal que tropieza dos veces en la misma piedra?
Pues no lo sé, pero lo mio es tropezar y volver a tropezar 🙁
2 Comments
Queli Coto
Si esa es otra de las muchas perrerías que nos hace el IE6, lo que sí puedes jugar es con la doble clase para poder diferenciar un mismo elemento con distinto estado, esto da muchísimo juego.
Sería
a.current.home
y lo soporta perfectamente el ie6
Un saludo
javiaurea
Gracias Queli, aunque en este caso me parece más semántico el empleo del identificador que la doble clase 😉
Comments are closed for this post