javascript - Cómo solucionarlo: IE6 no es compatible con selectores CSS de "atributos"

internet-explorer internet-explorer-6 (7)

Desde IE6 se limita esencialmente a:

selectores de clase
Selectores de ID
selectores descendientes (espacio)
a: -sólo pseudo-selectores

tus únicas opciones son:

Usa más clases para identificar tus elementos
Use JavaScript ( muy recomendable, excepto en casos altamente especializados)

Me parece muy útil aprovechar la capacidad de asignar múltiples clases a un elemento separándolos con un espacio: class="foo bar"

Uno de los proyectos en los que estoy trabajando utiliza el selector CSS "atributo" [att]

Selectores de CSS

que no es compatible con ie6: Soporte para selectores de CSS en IE6 (busque el texto "Selectores de atributos")

¿Hay alguna solución / truco que sea válida html / css para superar este problema?

Esto no es posible sin salpicar tu HTML con una pila de selectores de clase extraños, por desgracia.

Recomiendo diseñar su sitio para que su CSS completamente válido funcione para las personas que usan navegadores modernos, y que todavía se puede usar en el IE6, aunque visualmente no es del todo correcto. Solo debe encontrar el equilibrio adecuado entre lograr que su sitio cumpla con los estándares y hacer lo imposible para los usuarios que no se actualizarán. Es un navegador roto, trátelo como tal.

La biblioteca de JavaScript IE7 de Dean Edwards proporciona compatibilidad con el selector de atributos para IE 5 y 6.

Si desea el selector de atributos en IE6, puede usar Dean Edward IE.js. http://dean.edwards.name/IE7/

Eso hará que IE 5+ se comporte mucho más como IE7

supports the following CSS selectors: parent > child adjacent + sibling adjacent ~ sibling [attr], [attr="value"], [attr~="value"] etc .multiple.classes (fixes bug) :hover, :active, :focus (for all elements) :first-child, :last-child, only-child, nth-child, nth-last-child :checked, :disabled, :enabled :empty, :contains(), :not() :before/:after/content: :lang()

No tenía IE6 (uso IE7) así que no puedo decir que funcionó, pero pruébalo

Usar clases, esa es la única solución, por desgracia.

Si está utilizando jQuery en su sitio, otra opción es SuperSelectores : va a través de las hojas de estilo de su sitio, agregando clases dinámicamente a los elementos para que incluso IE6 pueda disfrutar del apoyo de los selectores CSS como ul li:first-child li:nth-child(odd) a:hover .

Puede usar las expresiones CSS de Internet Explorer combinadas con el guión bajo de CSS seguro ("_", IE6 y anterior):

/* Adds dotted bottom border to `<ABBR>` with a `title` attribute. */ abbr { _border-bottom: expression(this.title ? ''1px dotted'' : ''none''); } abbr[title] { border-bottom: 1px dotted; }

Entiendo, que pidió CSS "válido", pero si el hack de CSS anterior le asusta, lea sobre Hacks de CSS seguros .

Lo anterior podría cambiarse a:

.ie6 abbr { _border-bottom: expression(this.title ? ''1px dotted'' : ''none''); } abbr[title] { border-bottom: 1px dotted; }

Eso es si tu HTML comenzó como:

   <html>