javascript - Comment faire pour contourner le problème: IE6 ne prend pas en charge les sélecteurs CSS "attribut"



internet-explorer internet-explorer-6 (5)

Un des projets que je travaille utilise CSS "attribut" selector [att]

CSS Sélecteurs

qui n'est pas supporté par ie6: Support des sélecteurs CSS dans IE6 (recherchez le texte "Sélecteurs d'attributs")

Y at-il une solution de contournement / hack qui est bien sûr valide html / css pour surmonter ce problème?



Answer #2

Puisque IE6 est essentiellement limité à:

  • sélecteurs de classe
  • Sélecteurs d'identifiant
  • (espace) sélecteurs descendants
  • a: -lyly pseudo-sélecteurs

vos seules options sont:

  • Utilisez plus de classes pour identifier vos éléments
  • Utiliser JavaScript ( fortement déconseillé sauf dans des cas hautement spécialisés)

Je trouve très utile de profiter de la possibilité d'assigner plusieurs classes à un élément en les séparant avec un espace: class="foo bar"


Answer #3

Ce n'est pas possible sans pepper votre code HTML avec une pile de sélecteurs de classe étrangers, malheureusement.

Je vous recommande de concevoir votre site de manière à ce que votre CSS entièrement valide fonctionne pour les personnes utilisant des navigateurs modernes, et qu'il soit toujours utilisable sur IE6, même si ce n'est pas tout à fait correct. Vous devez juste trouver le bon équilibre entre mettre votre site à niveau et se pencher en arrière pour les utilisateurs qui ne mettront pas à niveau. C'est un navigateur cassé, traitez-le comme tel.


Answer #4

Utilisez des classes, c'est la seule solution de contournement, malheureusement.


Answer #5

Vous pouvez utiliser les expressions CSS Internet Explorer combinées avec le caractère de soulignement sécurisé ("_", IE6 et versions antérieures) CSS:

/* 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;
}

Je comprends, que vous avez demandé CSS "valide", mais si le hack CSS ci-dessus vous fait peur, s'il vous plaît lire sur Safe CSS Hacks .

Ce qui précède pourrait être changé pour:

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

abbr[title] {
        border-bottom: 1px dotted;
}

C'est si votre HTML a commencé comme:

<!--[if lt IE 7]><html class="ie6"><![endif]-->
<!--[if IE 7]>   <html class="ie7"><![endif]-->
<!--[if IE 8]>   <html class="ie8"><![endif]-->
<!--[if gt IE 8]><!--><html><!--<![endif]-->




css-selectors