Maison >interface Web >tutoriel CSS >Comment puis-je cibler IE7 et IE8 avec un CSS valide ?
Comment puis-je cibler IE7 et IE8 avec un CSS valide ?
- DDDoriginal
- 2024-10-29 00:43:30203parcourir
Cibler IE7 et IE8 avec un CSS valide
Cibler des versions spécifiques d'IE avec CSS peut s'avérer difficile, car l'application de correctifs pour une version peut ne pas fonctionner pour un autre. Ce guide présente deux méthodes pour cibler IE7 et IE8 avec du CSS valide : utiliser HTML et CSS sans hacks et utiliser des "hacks" CSS
Ciblage explicite sans hacks
Pour éviter d'utiliser des hacks, ajoutez une classe unique au navigateur au élément et sélectionnez en fonction du navigateur plus tard. Par exemple :
<code class="html"><!doctype html> <!--[if IE]><![endif]--> <!--[if lt IE 7 ]> <html lang="en" class="ie6"> <![endif]--> <!--[if IE 7 ]> <html lang="en" class="ie7"> <![endif]--> <!--[if IE 8 ]> <html lang="en" class="ie8"> <![endif]--> <!--[if IE 9 ]> <html lang="en" class="ie9"> <![endif]--> <!--[if (gt IE 9)|!(IE)]><!--><html lang="en"><!--<![endif]--></code>
Ensuite, appliquez le ciblage CSS spécifiquement aux versions de navigateur souhaitées :
<code class="css">.ie6 body {
border:1px solid red;
}
.ie7 body {
border:1px solid blue;
}</code>
Ciblage avec des hacks CSS
Pour ciblez les versions d'IE à l'aide de hacks, utilisez les caractères suivants :
- "9" : cible IE8 et inférieur
- "*" : cible IE7 et inférieur
- "_ " : cible IE6
Exemple :
<code class="css">body {
border:1px solid red; /* standard */
border:1px solid blue; /* IE8 and below */
*border:1px solid orange; /* IE7 and below */
_border:1px solid blue; /* IE6 */
}</code>
Cibler IE10
IE10 ne reconnaît pas les instructions conditionnelles, ajoutez donc un "ie10 " à la classe élément utilisant :
<code class="html"><!doctype html>
<html lang="en">
<!--[if !IE]><!--><script>if (/*@cc_on!@*/false) {document.documentElement.className+=' ie10';}</script><!--<![endif]-->
<head></head>
<body></body>
</html></code>Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!