Existe-t-il un moyen de faire échouer gracieusement IE6 en rencontrant '>'?

Il est bien connu qu'IE6 ne supporte pas la sélection descendante directe avec >, mais ce que j'ai trouvé récemment, c'est que si vous avez plusieurs règles de sélection séparées par des virgules, elles les ignorent toutes si >.Existe-t-il un moyen de faire échouer gracieusement IE6 en rencontrant '>'?

Voici le morceau de code que j'utilisé pour tester la question:

<body> 
    <style> 
     .one, .two{ 
      width: 100px; 
      height: 100px; 
      background-color: #FFCCAA; 
     } 
     body .two, body > .one{ 
      background-color: #CCFFAA; 
     } 
    </style> 
    <div class="one"></div> 
    <div class="two"></div>  
</body>

Je suppose (n'a pas lu les docs) que ce comportement est normal parce que quand vous écrivez AAA, BBB vous ne définissez pas réellement deux sélecteurs, mais un avec deux parties.

Encore faut-il demander ... Y at-il une solution qui n'implique pas d'écrire deux fois mes règles CSS?

Merci,
Alin

post-scriptum L'utilisation de JavaScript n'est pas acceptable.

Source

2010-12-10 Alin Purcaru

Vous ne définissez deux sélecteurs séparés, mais en utilisant une virgule pour les regrouper, il est considéré comme une règle. La spécification indique que sur un sélecteur non reconnu, la * règle * entière est ignorée. Donc en effet, IE6 échoue aussi gracieusement que prévu. La seule vraie solution est, comme le dit PorneL, de séparer les sélecteurs dans leurs propres règles:/ – BoltClock

Le comportement que vous avez rencontré fait partie de standard CSS error recovery, donc IE6 le fait correctement (pour un navigateur qui ne supporte pas CSS2).

Vous devez dupliquer la règle, et utiliser des sélecteurs CSS2 séparément:

<style> 
    body .two { 
     background-color: #CCFFAA; 
    } 
    body > .one { 
     background-color: #CCFFAA; 
    } 
</style>

Source

2010-12-10 15:09:42 Kornel

Comme je le craignais, cela doit être la bonne réponse. Il serait utile que vous puissiez insérer un lien vers un document officiel qui le confirme. –

Désolé, mais je ne crois pas que ce soit possible sans Javascript.

Il ya quelques hacks JS (Dean Edwards IE7 à l'esprit), mais sans JS, le simple fait est que IE6 ne le supporte pas, donc vous ne pouvez pas l'utiliser.

Je suppose que si vous êtes prêt à faire n'importe quoi qui n'implique pas JS, vous pouvez envisager le plug-in Google Frame, qui remplace complètement le moteur de rendu dans IE en faveur du moteur Chrome. Mais c'est un bidouillage beaucoup plus important que tout ce que Javascript ferait, donc j'imagine que vous ne voudriez pas faire ça non plus. Franchement, la meilleure option serait de supprimer le support pour IE6. Mais je comprends que ce n'est peut-être pas une option. (il sera bon pour votre santé, cependant)

Si vous devez supporter IE6, la seule vraie option que vous avez est de mettre des classes ou des ID sur tout et oublier d'utiliser autre chose que les sélecteurs CSS les plus basiques.

Désolé.

Source

2010-12-10 10:43:07 Spudley

J'ai tendance à rendre la page jolie pour les navigateurs les plus récents, et à la faire "travailler" avec IE6 et al, c'est-à-dire le contenu devrait s'afficher et la navigation devrait s'afficher et être cliquable. –

Merci pour l'entrée, mais comme je l'ai dit, je ne veux pas utiliser JS (je connaissais déjà ie7.js). Dupliquer le CSS est une meilleure solution pour moi que JS en ce moment. @Nathan Je n'essaie pas de construire un site web simple. Si c'était le cas, j'aurais ajouté des classes et des ID pour contourner le problème. –

Existe-t-il un moyen de faire échouer gracieusement IE6 en rencontrant '>'?

Répondre

Questions connexes