Appliquer le style UNIQUEMENT sur IE

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 veux seulement que IE 7, 8 et 9 "voit" width: 100%

Quelle est la manière la plus simple d'y parvenir?

Mise à jour 2017

Selon l'environnement, les commentaires conditionnels ont été officiellement obsolètes et supprimés dans IE10 +.

Original

Le moyen le plus simple est probablement d'utiliser un commentaire conditionnel Internet Explorer dans votre HTML:

<!--[if IE]>
<style>
    .actual-form table {
         width: 100%;
    }
</style>
<![endif]-->

Il existe de nombreux hacks (par exemple le hack de soulignement ) que vous pouvez utiliser qui vous permettront de cibler uniquement IE dans votre feuille de style, mais cela devient très compliqué si vous voulez cibler toutes les versions d'IE sur toutes les plates-formes.

@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 multimédia, elle sera donc analysée par IE uniquement, que l'utilisateur ait activé le contraste élevé ou non.

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

Voir des hacks CSS et JS spécifiques au-delà d'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; }
}

Il existe plusieurs hacks disponibles pour IE

Utilisation des commentaires conditionnels avec la feuille de style

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

Utilisation des commentaires conditionnels avec la section principale 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 multimé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; }
 }

En plus d'un commentaire conditionnel, vous pouvez également utiliser le sélecteur de navigateur CSS http://rafael.adm.br/css_browser_selector/ car cela vous permettra de cibler des navigateurs spécifiques. Vous pouvez ensuite 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.

Je pense que pour les meilleures pratiques, vous devriez écrire une déclaration conditionnelle IE à l'intérieur de la <head>balise qui contient un lien vers votre feuille de style spéciale. Cela DOIT ÊTRE après votre lien css personnalisé afin qu'il remplace ce dernier, j'ai un petit site donc j'utilise le même css css pour toutes les pages.

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

cela diffère de la réponse de James comme je pense (opinion personnelle parce que je travaille avec une équipe de concepteurs et je ne veux pas qu'ils touchent mes fichiers html et gâchent quelque chose là-bas), vous ne devriez jamais inclure de styles dans votre fichier html.

Un peu tard sur celui-ci mais cela a parfaitement fonctionné pour moi lorsque j'ai essayé de masquer l'arrière-plan pour IE6 et 7

.myclass{ 
    background-image: url("images/myimg.png");
    background-position: right top;
    background-repeat: no-repeat;
    background-size: 22px auto;
    padding-left: 48px;
    height: 42px;
    _background-image: none;
    *background-image: none;
}

J'ai eu ce hack via: http://briancray.com/posts/target-ie6-and-ie7-with-only-1-extra-character-in-your-css/

#myelement
{
    color: #999; /* shows in all browsers */
    *color: #999; /* notice the * before the property - shows in IE7 and below */
    _color: #999; /* notice the _ before the property - shows in IE6 and below */
}

Bienvenue BrowserDetect - une fonction géniale.

<script>
    var BrowserDetect;
    BrowserDetect = {...};//  get BrowserDetect Object from the link referenced in this answer
    BrowserDetect.init();
    // On page load, detect browser (with jQuery or vanilla)
    if (BrowserDetect.browser === 'Explorer') {
      // Add 'ie' class on every element on the page.
      $('*').addClass('ie');
    }
</script>

<!-- ENSURE IE STYLES ARE AVAILABLE -->
<style>
    div.ie {
       // do something special for div on IE browser.
    }
    h1.ie {
     // do something special for h1 on IE browser.
    }
</style>

Le Object BrowserDetect fournit également des versioninformations afin que nous puissions ajouter des classes spécifiques - par exemple. $('*').addClass('ie9');si (BrowserDetect.version == 9).

Bonne chance....

Cela dépend vraiment des versions d'IE ... J'ai trouvé cette excellente ressource qui est à jour depuis IE6-10 :

Hack CSS pour Internet Explorer 6

Il s'appelle le Star HTML Hack et se présente comme suit:

• html .color {color: # F00;} Ce hack utilise du CSS entièrement valide.

Hack CSS pour Internet Explorer 7

Il s'appelle le Star Plus Hack.

*: first-child + html .color {color: # F00;} Ou une version plus courte:

* + html .color {color: # F00;} Comme le hack HTML étoile, cela utilise du CSS valide.

Hack CSS pour Internet Explorer 8

@media \ 0screen {.color {color: # F00;}} Ce hacks n'utilise pas de CSS valide.

Hack CSS pour Internet Explorer 9

: root .color {color: # F00 \ 9;} Ce hacks n'utilise pas non plus de CSS valide.

Ajouté le 04/02/2013: Malheureusement, IE10 comprend ce hack.

Hack CSS pour Internet Explorer 10

@media screen et (-ms-high-contrast: active), (-ms-high-contrast: none) {.color {color: # F00;}} Ce hacks n'utilise pas non plus de CSS valide.

Pour / * Internet Explorer 9+ (une ligne) * /

_::selection, .selector { property:value\0; }

Seule cette solution fonctionne parfaitement pour moi.

<!--[if !IE]><body<![endif]-->
<!--[if IE]><body class="ie"> <![endif]-->

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

Pour IE9 +

@media screen and (min-width:0\0) and (min-resolution: +72dpi) {
   // IE9+ CSS
   .selector{
      color: red;
   }
}

IE Edge 12+

@supports (-ms-ime-align: auto) {
  .selector {
    color: red;
  }
}

Celui-ci fonctionne sur Edge et tous les IE

:-ms-lang(x), .selector { color: red; }