Sélecteur IE8 css
Pour cibler des éléments uniquement dans les navigateurs IE, j'utiliserai
IE6:
* html #nav li ul {
left: -39px !important;
border: 1px solid red;
}
IE7:
*+html #nav li ul {
left: -39px! important;
}
Est-ce que quelqu'un sait comment cibler IE8?
Je ne vais pas me lancer dans un débat sur le point de savoir si cette méthode devrait être utilisée ou non, mais cela vous permettra de définir des attributs CSS spécifiques pour IE8-9 uniquement (remarque: ce n'est pas un sélecteur, donc un peu différent de a demandé):
Utilisez '\ 0 /' après chaque déclaration css, ainsi:
#nav li ul {
left: -39px\0/ !important;
}
Et pour créer une autre réponse, vous pouvez le faire en attribuant différents styles à 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\0/ !important; /* IE 8-9 */
}
source: http://dimox.net/personal-css-hacks-for-ie6-ie7-ie8/
Mise à jour 2013: IE10 + ne prend plus en charge les commentaires conditionnels.
Réponse originale:
Certaines personnes semblent confuses parce que cela ne répond pas à la lettre de la question, mais uniquement à l'esprit - donc pour clarification:
Il n’existe pas de sélecteur de navigateur. Il existe des hacks qui tirent parti des bugs et/ou problèmes rencontrés dans les analyseurs CSS de certains navigateurs, mais leur utilisation risque d’être vouée à l’échec. Il existe un moyen standard et accepté de traiter ce problème:
Utilisez commentaires conditionnels pour cibler IE uniquement.
Exemple:
<!--[if gte IE 8]>
<style>
(your style here)
</style>
<![endif]-->
Tout ce qui se trouve dans les deux <!--> sera ignoré sous forme de commentaire par tous les navigateurs non IE, et les versions IE inférieures à IE8 l'ignoreront. Seul IE8 et supérieur le traitera. 2013 update: IE10 + l'ignorera également en tant que commentaire.
Jetez un coup d'oeil à ceux-ci:
/* IE8 Standards-Mode Only */
.test { color /*\**/: blue\9 }
/* All IE versions, including IE8 Standards Mode */
.test { color: blue\9 }
(Source: Le hack CSS de David Bloom pour IE8 Standards Mode )
vous pouvez utiliser comme ça .. 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; }
En vous basant sur l'excellente réponse de image72, vous pourriez avoir des sélecteurs CSS avancés comme celui-ci:
<!--[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]-->
afin que dans votre css vous puissiez 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 de hacks css moche/dangereux)
- Pas besoin d'avoir des feuilles de style séparées
- Vous pouvez facilement cibler n'importe quelle version de IE ainsi que des combinaisons complexes
Cette question est ancienne mais ..
Juste après la balise d'ouverture du corps ..
<!--[if gte IE 8]>
<div id="IE8Body">
<![endif]-->
Juste avant la balise de fermeture du corps ..
<!--[if gte IE 8]>
</div>
<![endif]-->
CSS ..
#IE8Body #nav li ul {}
Vous pouvez le faire pour tous les navigateurs IE à l'aide d'instructions conditionnelles. OR cible TOUS les navigateurs en encapsulant tout le contenu d'une div avec le nom du navigateur + la version côté serveur.
À la lumière de l'évolution du fil, voir ci-dessous 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\9 {
.ie67 {property:value;}
}
ou
.ie67 { *property:value;}
ou
.ie67 { #property:value;}
IE 6, 7 et 8
@media \0screen\,screen\9 {
.ie678 {property:value;}
}
IE 8
html>/**/body .ie8 {property:value;}
ou
@media \0screen {
.ie8 {property:value;}
}
IE 8 en mode standard uniquement
.ie8 { property /*\**/: value\9 }
IE 8,9 et 10
@media screen\0 {
.ie8910 {property:value;}
}
IE 9 seulement
@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;}
}
IE 10 seulement
_:-ms-lang(x), .ie10 { property:value\9; }
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; }
Alternatives javascript
Modernisation
Modernizr s'exécute rapidement au chargement de la page pour détecter les fonctionnalités; alors crée un objet JavaScript avec les résultats et ajoute des classes au fichier élément html
Sélection de l'agent utilisateur
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':'');
Ajoute (par exemple) l'élément ci-dessous à l'élément html:
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'
Autoriser 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, évitez le ciblage par navigateur. Identifiez et corrigez tout problème que vous identifiez. Support amélioration progressive et dégradation progressive . En gardant cela à l'esprit, il s'agit d'un scénario de «monde idéal» qui ne peut pas toujours être obtenu dans un environnement de production. En tant que tel, ce qui précède devrait permettre de fournir quelques bonnes options.
Attribution/Lecture essentielle
J'ai une solution que je n'utilise que lorsque je le dois, après avoir construit mon code html & css valide et fonctionnant dans la plupart des navigateurs, je fais des piratages occasionnels avec cet incroyable morceau de javascript de Rafael Lima. http://rafael.adm.br/css_browser_selector/
Cela maintient mon code CSS & HTML valide et propre, je sais que ce n’est pas la solution idéale; javascript est utilisé pour corriger les hacks, mais tant que votre code est à l’origine aussi proche que possible (idiot IE casse parfois des choses) Quelques pixels avec JavaScript ne sont pas aussi importants que certains le pensent. De plus, pour des raisons de temps et d’argent, la solution est simple et rapide.
Dans le monde ASP.NET, j'ai tendance à utiliser la fonctionnalité intégrée BrowserCaps 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, avant le rendu, je voudrais exécuter quelque chose comme ce code (en supposant que vous donniez un identifiant à votre tag et que vous le fassiez courir 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 System.Web.UI.MasterPage et nous nous assurons que toutes nos pages maîtres héritent de notre page spécialisée MasterPage afin que chaque page reçoive ces classes ajoutées gratuitement.
Si vous n'êtes pas dans un environnement ASP.NET, vous pouvez utiliser jQuery, qui dispose d'un plug-in de navigateur qui ajoute dynamiquement des noms de classe similaires lors du chargement de la page.
Cette méthode présente l'avantage de supprimer les commentaires conditionnels de votre balisage et de conserver vos styles principaux et les styles spécifiques à votre navigateur à peu près au même endroit dans vos fichiers CSS. Cela signifie également que votre code CSS est plus évolutif (puisqu'il ne repose pas sur des bogues pouvant être corrigés) et aide votre code CSS à prendre plus de sens puisqu'il vous suffit de voir
.IE8 #container { .... }
Au lieu de
* html #container { .... }
ou pire!
Je réalise que c’est une vieille question, mais c’était le premier résultat sur Google lorsque j’ai effectué une recherche. Je pense avoir trouvé une meilleure solution que la suggestion la mieux classée et ce que le PO a choisi de faire.
#nav li ul:not(.stupidIE) { color:red }
Donc, techniquement, c'est l'opposé de ce que voulait le PO, mais cela signifie simplement que vous devez d'abord appliquer la règle que vous voulez pour IE8, puis l'appliquer à tout le reste. Bien sûr, vous pouvez mettre n'importe quoi dans le () tant que c'est un css valide qui ne sélectionne rien. IE8 s'étouffe sur cette ligne et ne l'applique pas, mais les IE précédents (ok, j'ai seulement vérifié IE7, j'ai arrêté de me soucier de IE6), ignorez simplement le: not () 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 le souhaitiez.
Donc, cette solution, comme toute autre solution CSS pure, supposerait que si les développeurs IE ajoutaient un support pour le sélecteur: not, ils corrigeraient également les écarts qui vous poussaient à cibler IE8.
OK, c’est donc pas du hack css, mais par frustration de ne pas pouvoir trouver les moyens de cibler ie8 à partir de css, et à cause de la politique de ne pas avoir de fichiers css spécifiques, j’ai dû faire ce qui suit, je suppose pourrait trouver utile:
if (jQuery.browser.version==8.0) {
$(results).css({
'left':'23px',
'top':'-253px'
});
}
\ 9 ne fonctionne pas avec font-family , vous devez utiliser «\ 0 /! Important» comme Chris l’a mentionné plus haut, par exemple:
p { font-family: Arial \0/ !important; }
Il n'y a pas de hacks de sélecteur pour IE8. La meilleure ressource pour ce numéro est http://browserhacks.com/#ie
Si vous voulez cibler IE8 spécifique, vous devriez faire un commentaire en HTML
<!--[if IE 8]> Internet Explorer 8 <![endif]-->
ou vous pouvez utiliser des hacks d'attributs comme:
/* IE6, IE7, IE8, but also IE9 in some cases :( */
#diecinueve { color: blue\9; }
/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }
/* IE8, IE9 */
#anotherone {color: blue\0/;} /* must go at the END of all rules */
Pour plus d'informations sur celui-ci: http://www.paulirish.com/2009/browser-specific-css-hacks/