Comment définir des règles CSS spécifiques pour IE9 seul?

StackOverflow https://stackoverflow.com/questions/7364891

Question

Mes amis, aidez-moi s'il vous plaît à définir une règle css spécifique pour IE9? Par exemple comme ceci 

/* IE 6 fix */
* html .twit-post .delete_note a { background-position-y: 2px; }
* html .twit-post .delete_note a:hover { background-position-y: -14px; }
Était-ce utile?

La solution

Notez que la réponse acceptée cible également IE10. En tant que tel, pour une liste 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;}
}

Mode standard d'IE 8 uniquement 

.ie8 { property /*\**/: value\9 }

IE 8,9 et 10 

@media screen\0 {
    .ie8910 {property:value;}
}

IE 9 uniquement 

@media screen and (min-width:0) and (min-resolution: .001dpcm) { 
 // IE9 CSS
 .ie9{property:value;}
}

IE 9 et supérieur 

@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 uniquement 

_:-ms-lang(x), .ie10 { property:value\9; }

IE 10 et supérieur 

_:-ms-lang(x), .ie10up { property:value; }

ou 

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
   .ie10up{property:value;}
}

IE 11 (et supérieur ..) 

_:-ms-fullscreen, :root .ie11up { property:value; }

Alternatives Javascript

Modernizr

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 é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) ce qui suit à 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'

Permettre 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 les problèmes que vous identifiez. Soutenir amélioration progressive et dégradation gracieuse . Dans cet 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 aider à fournir de bonnes options.

Attribution / Lecture essentielle

Autres conseils

Vous pouvez ajouter le style CSS avec 

:root

pour le rendre spécifique à IE9, comme ceci: 

:root #element { color:pink \0/IE9; }  /* IE9 */

Utilisez commentaires conditionnels IE : 

<!--[if ie 9]>
    your stuff here
<![endif]-->

\ 9 est un "hack CSS" spécifique à Internet Explorer.

Cela signifie simplement que la ligne spécifique de CSS se terminant par \ 9;

Dans votre exemple, Si votre CSS ressemblait à ceci ... 

html .twit-post .delete_note a 
{ 
background-position-y: 2px\9; 

}
html .twit-post .delete_note a:hover 
{ 
 background-position-y: -14px\9;
 }

Le résultat serait background-position-y: -14px;dans IE 9

Je pense que vous pouvez faire la même chose que si vous voulez écrire du code spécifique pour IE6 mais dites IE9 à la place :) 

<!--[if IE 9]>
Special instructions for IE 9 here
<![endif]-->

utilisez du CSS conditionnel: (placez le code au-dessus du <head> sur votre html, et IE9 lira ce fichier CSS supplémentaire) 

<!--[if (gte IE 9)|!(IE)]><!-->
place the link to the CSS file here
<![endif]-->

Cela signifie que l'approche est avec un nouveau fichier CSS plutôt qu'un hack dans les classes, cela garantit que le CSS est valide.

J'ai constaté que dans certains cas, en utilisant des valeurs négatives (lors de l'utilisation d'un compilateur pour compiler des fichiers LESS) en utilisant: 

margin-right: -15px\9; /* This fails */
margin-right: ~"-18px\9"; /* This passes */

Vous ne devriez pas avoir besoin de cibler IE9.Il est capable de gérer les css modernes et ne doit pas être piraté.C'est une méthode de développement obsolète.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top