Appliquer le style UNIQUEMENT sur IE

Question

Voici mon bloc de CSS :

.actual-form table {
  padding: 5px 0 15px 15px;
  margin: 0 0 30px 0;
  display: block;
  width: 100%;
  background: #f9f9f9;
  border-top: 1px solid #d0d0d0;
  border-bottom: 1px solid #d0d0d0;
}

Je ne veux que IE 7, 8 et 9 pour "voir" width: 100%

Quel est le moyen le plus simple d'y parvenir ?

Answer 1

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   #myElement {
        /* Enter your style code */
   }
}

Explication : Il s'agit d'une requête multimédia spécifique à Microsoft. En utilisant la propriété -ms-high-contrast spécifique à Microsoft IE, elle ne sera analysée que dans Internet Explorer 10 ou supérieur. J'ai utilisé les deux valeurs valides de la requête média, elle sera donc analysée par IE uniquement, que l'utilisateur ait un contraste élevé activé ou non.

Answer 2

En dehors des commentaires conditionnels IE, il s'agit d'une liste mise à jour sur la façon de cibler IE6 vers IE10.

Voir les hacks CSS et JS spécifiques au-delà de IE.

/***** Attribute Hacks ******/

/* IE6 */
#once { _color: blue }

/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }

/* Everything but IE6 */
#diecisiete { color/**/: blue }

/* IE6, IE7, IE8, but also IE9 in some cases :( */
#diecinueve { color: blue\9; }

/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }

/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */

/* IE8, IE9 */
#anotherone  {color: blue\0/;} /* must go at the END of all rules */

/* IE9, IE10, IE11 */
@media screen and (min-width:0\0) {
    #veintidos { color: red}
}


/***** Selector Hacks ******/

/* IE6 and below */
* html #uno  { color: red }

/* IE7 */
*:first-child+html #dos { color: red }

/* IE8 (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }

/* Everything but IE6-8 */
:root *> #quince { color: red  }

/* IE7 */
*+html #dieciocho {  color: red }

/* IE 10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   #veintiun { color: red; }
}

Answer 3

Il y a des hacks de Séparals disponibles pour IE

Utilisation de commentaires conditionnels avec feuille de style

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="only-ie.css" />
<![endif]-->

Utilisation de commentaires conditionnels avec la section de tête css

<!--[if IE]>
<style type="text/css">
    /************ css for all IE browsers ****************/
</style>
<![endif]-->

Utilisation de commentaires conditionnels avec des éléments HTML

<!--[if IE]> <div class="ie-only"> /*content*/ </div> <![endif]-->

Utilisation de la requête média

 IE10+
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
 selector { property:value; }
 }

 IE6,7,9,10
 @media screen and (min-width: 640px), screen\9 {
 selector { property:value; }
 }

 IE6,7
 @media screen\9 {
  selector { property:value; }
 }

 IE8
 @media \0screen {
  selector { property:value; }
 }

 IE6,7,8
 @media \0screen\,screen\9 {
  selector { property:value; }
 }

 IE9,10
 @media screen and (min-width:0\0){
  selector { property:value; }
 }

Answer 4

En plus d'un commentaire conditionnel pourrait également utiliser CSS Browser Selector http://rafael.adm.br/css_browser_selector/ car cela vous permettra de cibler des navigateurs spécifiques. Vous pouvez alors définir votre CSS comme

.ie .actual-form table {
    width: 100%
    }

Cela vous permettra également de cibler des navigateurs spécifiques dans votre feuille de style principale sans avoir besoin de commentaires conditionnels.