2009-11-03 5 views
1

J'essaie d'utiliser les instructions conditionnelles spécifiques à IE pour modifier les paramètres de classe en fonction du type de navigateur. J'avais l'impression qu'ils pouvaient le faire mais je n'arrive pas à le faire fonctionner. Ci-dessous un exemple simple. Si le navigateur est IE, le texte doit être bleu, sinon le texte doit rester rouge.comment se fait-il que mes instructions conditionnelles IE ne fonctionnent pas dans les balises de style?

"Le navigateur est IE" déclaration dans le corps fonctionne très bien, si j'ouvre Firefox il n'est pas là, Internet Explorer .. il est.

Qu'est-ce que je fais mal?

<html> 
<head> 
<style type="text/css"> 
.class{color:red;} 
<!--[if IE]> 
.class{color:blue;} 
<![endif]--> 
</head> 
</style> 
<body> 
<!--[if IE]> 
This browser is IE 
<![endif]--> 
<p class="class">Color changing text based on browser</p> 
</body> 
</html> 

Répondre

9

Tout d'abord votre code ne fonctionne pas - vous devez avoir le lire .color ne css .class

deuxième les instructions conditionnelles ne fonctionnent pas à l'intérieur css. Donc écrivez plutôt votre code de sorte que le conditionnel soit autour du style spécifique d'IE.

<html> 
<head> 
    <style type="text/css"> 
     .color{ color:red; } 
    </style> 

    <!--[if IE]> 
    <style type="text/css"> 
     .color{ color:blue; } 
    </style> 
    <![endif]--> 
</head> 

<body> 
    <!--[if IE]> 
    This browser is IE 
    <![endif]--> 
    <p class="color">Color changing text based on browser</p> 
</body> 
</html> 
+0

Psssh, sois gentil ... J'ai eu des problèmes de classe dans ma tête et je n'ai pas vérifié mon travail. J'aime mieux ta solution parce que je sens que créer une feuille de style entière n'est pas nessacry à moins d'avoir une grande quantité de css à conditionner. ;) Je vais donc vous donner le crédit, mais Ken a raison aussi. Merci pour l'aide LFSR – payling

+0

@payling - Je ne savais pas si c'était un faux type ou si c'est comme ça que tu l'avais écrit –

2

Apparemment, ils ne fonctionnent pas dans la balise de style. (voir ici: http://reference.sitepoint.com/css/conditionalcomments)

Il semble toutefois que vous puissiez les utiliser dans la balise head, et inclure un fichier CSS externe s'il s'agit d'IE, et masquer ce fichier css s'il s'agit d'un autre navigateur.

1

Si le 'hack' est ciblé sur IE6 ou plus, vous pouvez cependant faire aussi comme suit:

.color { 
    color: red; 
} 

* html .color { 
    color: blue; 
} 

Notez le préfixe "* html". Ceci est seulement analysé par IE6 et plus ancien. Vous pouvez également utiliser la déclaration "! Important". La ligne particulière serait alors ignorée par IE6 et plus ancien.

.color { 
    color: red !important; 
    color: blue; 
} 

Si vous avez relativement beaucoup d'entre eux, une meilleure pratique serait de charger un fichier CSS stylesheet supplémentaire en utilisant l'instruction conditionnelle.

0

vous pouvez également faire color: red; _color: blue;

Questions connexes