web-dev-qa-db-fra.com

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 "voient" width: 100%

Quel est le moyen le plus simple d'accomplir cela?

cssinternet-explorer
160
FastTrack

Mise à jour 2017

En fonction de l'environnement, les commentaires conditionnels ont été officiellement déconseillés et supprimés dans IE10 +.

Original

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

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

Il existe de nombreux hacks (par exemple, le soulignement de soulignement ) que vous pouvez utiliser pour vous permettre de cibler uniquement IE dans votre feuille de style, mais cela devient très compliqué si vous souhaitez cibler toutes les versions. de IE sur toutes les plateformes.

94
James Allardice
@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 de Microsoft IE, elle ne sera analysée que dans Internet Explorer 10 ou une version ultérieure. 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é ou non le contraste élevé.

227
Himanshu Dwivedi

Hormis les commentaires conditionnels IE, il s'agit d'un liste mise à jour expliquant comment cibler IE6 sur IE10.

Voir les astuces 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; }
}
48
Oriol

Plusieurs hacks sont disponibles pour IE

tilisation de commentaires conditionnels avec la feuille de style

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

tilisation de commentaires conditionnels avec la section head css

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

tilisation de commentaires conditionnels avec des éléments HTML

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

tilisation 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; }
 }
35
Santosh Khalse

En plus d'un commentaire conditionnel, vous pouvez également utiliser le sélecteur de navigateur CSS http://rafael.adm.br/css_browser_selector/ , ce qui 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.

25
frontendzzzguy

Un peu en retard sur celui-ci mais cela a parfaitement fonctionné pour moi lorsque j'essayais de cacher le fond pour IE6 & 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 */
}
6
osouthgate

Je pense que pour les meilleures pratiques, vous devriez écrire IE instruction conditionnelle à l'intérieur de la balise <head> qui contient un lien vers votre feuille de style spéciale. Ceci DOIT ÊTRE après votre lien css personnalisé afin qu’il remplace celui-ci, j’ai un petit site donc j’utilise le même 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 james répondre comme je le pense (opinion personnelle parce que je travaille avec une équipe de concepteurs et que je ne veux pas qu’ils touchent mes fichiers html et gâchent quelque chose), vous ne devriez jamais inclure de styles dans votre fichier html.

6
elad silver

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>

La ObjectBrowserDetect fournit également les informations version afin que nous puissions ajouter des classes spécifiques - par exemple. $('*').addClass('ie9'); if (BrowserDetect.version == 9).

Bonne chance....

5
Akash

Cela dépend vraiment de la version IE ... que j'ai trouvée cette excellente ressource mise à jour depuis IE6-1 :

Hack CSS pour Internet Explorer 6

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

  • html .color {color: # F00;} Ce hack utilise du code CSS totalement valide.

Hack CSS pour Internet Explorer 7

C'est ce qu'on appelle le Star Plus Hack.

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

* + html .color {color: # F00;} Comme le piratage HTML en étoile, il utilise un code CSS valide.

Hack CSS pour Internet Explorer 8

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

Hack CSS pour Internet Explorer 9

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

Ajout de 2013.02.04: Malheureusement, IE10 comprend ce hack.

Hack CSS pour Internet Explorer 10

Écran @média et (-ms-haut-contraste: actif), (-ms-haut-contraste: aucun) {.color {couleur: # F00;}} Ce hacks n'utilise pas non plus de CSS valide.

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

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

Pour/* Internet Explorer 9+ (one-liner) * /

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

Seule cette solution fonctionne parfaitement pour moi.

1
Rahi.Shah