web-dev-qa-db-fra.com

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

Amis, aidez-moi à définir une règle css spécifique pour IE9? .__

/* IE 6 fix */
* html .twit-post .delete_note a { background-position-y: 2px; }
* html .twit-post .delete_note a:hover { background-position-y: -14px; }
cssinternet-explorer-9css-hack
25
user632347

Notez que la réponse acceptée cible également IE10. A ce titre, 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;}
}

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

30
SW4

Vous pouvez ajouter le style CSS avec

:root

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

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

Utilisez IE commentaires conditionnels:

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

\ 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

8
Harsh

Je pense que vous pouvez faire la même chose que si vous voulez écrire un code spécifique pour IE6 mais dites plutôt IE9 :)

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

utilisez les CSS conditionnels: (placez le code au-dessus du <head> sur votre code 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 consiste à utiliser un nouveau fichier CSS plutôt qu’un hack dans les classes, ce qui garantit la validité des CSS.

1
jackJoe

J'ai trouvé que dans certains cas, l'utilisation de 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 */
0
White Rabbit