Sélecteur CSS IE8
Pour cibler les éléments uniquement dans les navigateurs IE, je vais utiliser
IE6:
* html #nav li ul {
left: -39px !important;
border: 1px solid red;
}
IE7:
*+html #nav li ul {
left: -39px! important;
}
14 réponses
Je ne vais pas entrer dans un débat sur la question de savoir si cette méthode doit être utilisée, mais cela vous permettra de définir des attributs CSS spécifiques pour IE8-9 SEULEMENT (note: Ce n'est pas un sélecteur, donc un peu différent de ce que vous avez demandé):
Utiliser '\0/' après chaque déclaration css, donc:
#nav li ul {
left: -39px/ !important;
}
et pour construire une autre réponse, vous pouvez faire ceci pour assigner des styles variés à IE6, IE7, et IE8:
#nav li ul {
*left: -7px !important; /* IE 7 (IE6 also uses this, so put it first) */
_left: -6px !important; /* IE 6 */
left: -8px/ !important; /* IE 8-9 */
}
source: http://dimox.net/personal-css-hacks-for-ie6-ie7-ie8/
2013 mise à jour: IE10+ ne supporte plus les commentaires conditionnels.
réponse Originale à cette question:
certaines personnes semblent être confuses parce que cela ne répond pas à la lettre de la question, seulement à l'esprit - donc pour clarifier:
il n'existe pas de sélecteur de navigateur. Il y a des hacks qui tirent profit des bugs et/ou des problèmes dans les analyseurs css des navigateurs spécifiques, mais en se basant sur ceux-ci, vous réglez à l'échec. Il existe une façon standard et acceptée de traiter cette question:
Utiliser les commentaires conditionnels pour cible, c'est à dire uniquement.
Exemple:
<!--[if gte IE 8]>
<style>
(your style here)
</style>
<![endif]-->
Everything in the two <!--> sera ignoré par tous les navigateurs non-IE comme commentaire, et les versions IE qui sont inférieures à IE8 le sauteront. Seuls les IE8 et plus le traiteront. 2013 mise à jour: IE10+ l'ignorera aussi comme commentaire.
regardez:
/* IE8 Standards-Mode Only */
.test { color /*\**/: blue }
/* All IE versions, including IE8 Standards Mode */
.test { color: blue }
Vous pouvez utiliser comme ceci. c'est mieux que
<link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />
<!--[if IE 7]><link rel="stylesheet" type="text/css" media="screen" href="css/ie7.css" /><![endif]-->
<!--[if IE 6]><link rel="stylesheet" type="text/css" media="screen" href="css/ie6.css" /><![endif]-->
-------------------------------------------------------------
<!--[if lt IE 7 ]> <body class="ie6"> <![endif]-->
<!--[if IE 7 ]> <body class="ie7"> <![endif]-->
<!--[if IE 8 ]> <body class="ie8"> <![endif]-->
<!--[if !IE]>--> <body> <!--<![endif]-->
div.foo {color: inherit;} .IE7 div.foo { color: # ff8000;}
Cette question est ancienne, mais..
juste après l'étiquette d'ouverture du corps..
<!--[if gte IE 8]>
<div id="IE8Body">
<![endif]-->
juste avant l'étiquette de fermeture..
<!--[if gte IE 8]>
</div>
<![endif]-->
CSS..
#IE8Body #nav li ul {}
vous pouvez faire cela pour tous les navigateurs IE utilisant des déclarations conditionnelles, ou cibler tous les navigateurs en encapsulant tout le contenu dans un div avec le nom du navigateur + version Côté Serveur
feuille de style CSS uniquement pour IE8:
.divLogRight{color:Blue; color:Red; *color:Blue;}
seulement IE8 sera rouge.
premier Bleu: pour tous les navigateurs.
Rouge: IE6, 7, 8 Only
Deuxième Bleu: IE6,7 Seulement
donc Rouge = pour IE8 seulement.
pour un résumé très complet des hacks de navigateur (y compris Internet Explorer (IE), Safari, Chrome, iPhone, et Opera) visitez ce lien: http://paulirish.com/2009/browser-specific-css-hacks/
en se basant sur l'excellente réponse d'image72, vous pourriez en fait avoir des sélecteurs CSS avancés comme ceci:
<!--[if lt IE 7]><body class="IE IE7down IE8down IE9down IE10down"><![endif]-->
<!--[if IE 7]><body class="IE IE7 IE7down IE8down IE9down IE10down IE7up"><![endif]-->
<!--[if IE 8]><body class="IE IE8 IE8down IE9down IE10down IE7up IE8up"><![endif]-->
<!--[if IE 9]><body class="IE IE9 IE9down IE10down IE7up IE8up IE9up"><![endif]-->
<!--[if gte IE 10]><body class="IE IE10 IE10down IE7up IE8up IE9up IE10up"><![endif]-->
<!--[if !IE]>--><body class="notIE"><!--<![endif]-->
de sorte que, dans votre css, vous pouvez faire ceci:
.notIE .foo { color: blue; } /* Target all browsers except IE */
.IE9up .foo { color: green; } /* Taget IE equal or greater than 9 */
.IE8 .foo { color: orange; } /* Taget IE 8 only */
.IE7down .foo { color: red; } /* Target IE equal or less than 7 */
.IE8 .foo, .IE9 .foo {
font-size: 1.2em; /* Target IE8 & IE9 only */
}
.bar { background-color: gray; } /* Applies to all browsers, as usual */
/* Maybe show a message only to IE users? */
.notIE #betterBrowser { display: none; } /* Any browser except IE */
.IE #betterBrowser { display: block; } /* All versions of IE */
C'est génial, parce que:
- il est parfaitement conforme aux normes (pas laid/dangereux des hacks css)
- Pas besoin de séparer les feuilles de style
- vous pouvez facilement cibler N'importe quelle version D'IE ainsi que des combinaisons complexes
dans le ASP.NET world, j'ai eu tendance à utiliser la fonctionnalité BrowserCaps intégrée pour écrire un ensemble de classes sur la balise body qui vous permet de cibler n'importe quelle combinaison de navigateur et de plate-forme.
donc dans pre-render, j'exécuterais quelque chose comme ce code (en supposant que vous donniez un ID à votre balise et que vous la fassiez fonctionner sur le serveur):
HtmlGenericControl _body = (HtmlGenericControl)this.FindControl("pageBody");
_body.Attributes.Add("class", Request.Browser.Platform + " " + Request.Browser.Browser + Request.Browser.MajorVersion);
Ce code vous permet ensuite de cibler un navigateur spécifique dans votre CSS, comme ceci:
.IE8 #nav ul li { .... }
.IE7 #nav ul li { .... }
.MacPPC.Firefox #nav ul li { .... }
nous créons une sous-classe de Système.Web.INTERFACE.MasterPage et assurez-vous que toutes nos pages de maître héritent de notre MasterPage spécialisé de sorte que chaque page obtient ces classes ajoutées gratuitement.
si vous n'êtes pas dans un ASP.NET environnement, vous pouvez utiliser jQuery qui a un plugin de navigateur qui ajoute dynamiquement des noms de classe similaires sur page-load.
cette méthode a l'avantage de supprimer les commentaires conditionnels de votre balisage, et aussi de conserver à la fois vos styles principaux et les styles spécifiques à votre navigateur. à peu près au même endroit dans vos fichiers CSS. Cela signifie aussi que votre CSS est plus à l'épreuve du futur (puisqu'il ne s'appuie pas sur des bogues qui peuvent être corrigés) et aide votre code CSS à avoir beaucoup plus de sens puisque vous n'avez qu'à voir
.IE8 #container { .... }
au Lieu de
* html #container { .... }
ou pour le pire!
j'ai une solution que j'utilise seulement quand je dois, après avoir construit mon html & css valide et travailler dans la plupart des navigateurs, je fais le hack occasionnel avec ce morceau étonnant de javascript de Rafael Lima. http://rafael.adm.br/css_browser_selector/
il maintient mon CSS & HTML valide et propre, je sais que ce n'est pas la solution idéale, en utilisant javascript pour corriger les hacks, mais aussi longtemps que votre code est à l'origine aussi proche que possible (silly IE casse juste les choses parfois) puis se déplacer quelque chose avec du javascript n'est pas aussi important que certains le pensent. Plus pour des raisons de temps/coût est une solution rapide et facile.
Dans la lumière de l'évolution de fil, voir ci-dessous pour une réponse plus complète:
IE 6
* html .ie6 {property:value;}
ou
.ie6 { _property:value;}
IE 7
*+html .ie7 {property:value;}
ou
*:first-child+html .ie7 {property:value;}
IE 6 et 7
@media screen {
.ie67 {property:value;}
}
ou
.ie67 { *property:value;}
ou
.ie67 { #property:value;}
IE 6, 7 et 8
@media screen\,screen {
.ie678 {property:value;}
}
IE 8
html>/**/body .ie8 {property:value;}
ou
@media screen {
.ie8 {property:value;}
}
IE 8 Mode Standard Seulement
.ie8 { property /*\**/: value }
IE 8,9 et 10
@media screen {
.ie8910 {property:value;}
}
IE 9 only
@media screen and (min-width:0) and (min-resolution: .001dpcm) {
// IE9 CSS
.ie9{property:value;}
}
IE 9 et plus
@media screen and (min-width:0) and (min-resolution: +72dpi) {
// IE9+ CSS
.ie9up{property:value;}
}
IE 9 et 10
@media screen and (min-width:0) {
.ie910{property:value;}
}
10 IE ne
_:-ms-lang(x), .ie10 { property:value; }
IE 10 et plus
_:-ms-lang(x), .ie10up { property:value; }
ou
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.ie10up{property:value;}
}
IE 11 (et plus..)
_:-ms-fullscreen, :root .ie11up { property:value; }
JavaScript alternatives
Modernizr
Modernizr fonctionne rapidement sur la charge de page pour détecter les traits; il alors crée un objet JavaScript avec les résultats, et ajoute des classes l'élément html
User agent de sélection
Le Javascript:
var b = document.documentElement;
b.setAttribute('data-useragent', navigator.userAgent);
b.setAttribute('data-platform', navigator.platform );
b.className += ((!!('ontouchstart' in window) || !!('onmsgesturechange' in window))?' touch':'');
Adds(E. g) le dessous à la html elément:
data-useragent='Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C)'
data-platform='Win32'
permettant des sélecteurs CSS très ciblés, par exemple:
html[data-useragent*='Chrome/13.0'] .nav{
background:url(img/radial_grad.png) center bottom no-repeat;
}
Note de bas de page
si possible, éviter de cibler le navigateur. Identifiez et corrigez tout problème que vous identifiez. Support amélioration progressive et dégradation gracieuse. Dans cette perspective, il s'agit d'un scénario de "monde idéal" qui n'est pas toujours réalisable dans un environnement de production en tant que tel - ce qui précède devrait contribuer à offrir de bonnes options.
D'Attribution / De Lecture Essentielle
je me rends compte que c'est une vieille question mais c'était le premier résultat sur Google lorsque j'ai cherché et je pense que j'ai trouvé une meilleure solution que la suggestion LA PLUS classée et ce que L'OP a choisi de faire.
#nav li ul:not(.stupidIE) { color:red }
donc techniquement c'est le contraire de ce que le PO voulait, mais cela signifie Juste que vous devez appliquer la règle que vous voulez pour IE8 d'abord et puis appliquer ceci pour tout le reste. Bien sûr, vous pouvez mettre n'importe quoi dans le () tant qu'il est valide css qui ne fait pas réellement sélectionner quoi que ce soit. IE8 s'étouffe sur cette ligne et ne l'applique pas, mais les précédentes IEs (ok j'ai seulement coché IE7, j'ai arrêté de me soucier de IE6), ignorez simplement le :pas() et appliquez les déclarations. Et bien sûr, tous les autres navigateurs (J'ai testé Safari 5, Opera 10.5, Firefox 3.6) appliquent ce css comme vous vous y attendiez.
donc cette solution, je suppose que comme toute autre solution CSS pure supposerait que si les développeurs IE ajoutent le support pour le: not selector alors ils vont aussi corriger ce qui la divergence vous a fait cibler IE8.
OK donc, ce n'est pas un piratage css, mais par frustration de ne pas être capable de trouver des moyens de cibler ie8 à partir de css, et en raison de la Politique de ne pas avoir de fichiers CSS spécifiques d'ie, j'ai dû suivre, ce que je suppose que quelqu'un d'autre pourrait trouver utile:
if (jQuery.browser.version==8.0) {
$(results).css({
'left':'23px',
'top':'-253px'
});
}
\9 ne fonctionne pas avec font-family, au lieu de cela, vous devrez utiliser " \0/!important" comme Chris l'a mentionné ci-dessus, par exemple:
p { font-family: Arial / !important; }
il n'y a pas de hacks de sélecteur pour IE8. La meilleure ressource pour cette question est http://browserhacks.com/#ie
si vous voulez cibler un IE8 spécifique, vous devriez faire des commentaires en html
<!--[if IE 8]> Internet Explorer 8 <![endif]-->
ou vous pouvez utiliser l'attribut hacks de la forme:
/* IE6, IE7, IE8, but also IE9 in some cases :( */
#diecinueve { color: blue; }
/* IE7, IE8 */
#veinte { color/*\**/: blue; }
/* IE8, IE9 */
#anotherone {color: blue/;} /* must go at the END of all rules */