Appliquer le style UNIQUEMENT sur IE


184

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?


1
Pourquoi essayez-vous de faire ça? Quelle (s) version (s) d'IE ciblez-vous? Et IE10? (ne supporte pas les commentaires conditionnels habituels)
thirtydot

J'essaie de cibler IE 7, 8 et 9.
FastTrack

Quelle raison pourriez-vous avoir pour cibler IE9 mais pas IE10? Je serais ravi de savoir ...
thirtydot

1
IE n'interprète pas width: autoles éléments de bloc de la même manière que d'autres navigateurs tels que Firefox ou Chrome. Dans Chrome / Firefox width:autoétendra la largeur d'un élément de bloc sur toute la largeur de son conteneur. IE ne fait pas cela et nécessitewidth: 100%
FastTrack

Réponses:


102

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.


10
Existe-t-il un moyen d'utiliser ce commentaire conditionnel dans mon fichier CSS? Je voulais éviter d'encombrer mon HTML si je pouvais l'aider.
FastTrack

2
@FastTrack - Non, les commentaires conditionnels sont des commentaires HTML, ils doivent donc apparaître dans votre balisage. J'ai tendance à créer une toute nouvelle feuille de style juste pour IE, puis à l'inclure comme d'habitude dans les commentaires conditionnels.
James Allardice

James: Je pensais faire ça, mais ensuite je dois me battre pour mettre à jour deux feuilles de style distinctes chaque fois que je veux changer quelque chose, non?
FastTrack

3
@FastTrack - Non, votre feuille de style IE ne contiendrait que des styles spécifiques à IE. Incluez-le après votre feuille de style principale afin de pouvoir remplacer les styles définis dans votre feuille de style principale si nécessaire. Vous n'avez donc besoin de le mettre à jour que si vous souhaitez modifier quelque chose de spécifique à IE.
James Allardice

1
@FastTrack - Oui. Lorsque quelque chose est spécifié dans plusieurs feuilles de style, celle incluse plus tard est prioritaire.
James Allardice

284
@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.


6
seulement cela ne fonctionne pas sur le nouvel Internet-Explorer (edge), doit l'ajouter sans ms- trop
Saad Ahmed

6
Voir ici pour le bord de ciblage: stackoverflow.com/questions/28417056/…
Phyllis Sutherland

6
@SaadAhmed: Est-ce vraiment un problème? Edge est un navigateur raisonnablement bien comporté, bien meilleur que IE de toute façon, donc de nombreux hacks IE ne seront probablement pas nécessaires (ou prudents)?
Michael Scheper

1
Eh bien, cela a résolu mes stupides problèmes d'IE. Merci pour le correctif!
Jester

1
@MichaelScheper Ce bug posté dans le premier commentaire s'applique toujours dans le dernier bord (17 pour aujourd'hui). Le petit correctif de Saad m'a aidé à supprimer cette bizarrerie.
SimonRabbit le

54

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; }
}

1
J'ai essayé \9et \0/pour displaysur un sélecteur de classe, mais les deux s'appliqueront également à IE10. Existe-t-il un moyen de postuler uniquement pour IE9 [et inférieur ou non]?
Tom Brito

Vous pouvez essayer: \0/IE9mais ne l'avez pas testé. Sinon, je ne connais pas d'autre moyen de cibler IE9 à moins que vous n'utilisiez des clauses conditionnelles:<!--[if IE 9]><link rel="stylesheet" type="text/css" href="ie9-specific.css" /><![endif]-->
Oriol

1
Le @media screen and (min-width:0\0) {hack semble également être analysé par IE11 - donc ce n'est pas seulement 9 et 10 - veuillez vérifier et mettre à jour vos commentaires.
Rolf

J'ai utilisé @media screen et (-ms-high-contrast: active), (-ms-high-contrast: none) {} Cela a bien fonctionné.
Harsimer

43

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; }
 }

Notez que le dernier listé ( min-width:0\0) s'applique également à IE11
CBarr

26

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.


Cela ne semble pas avoir d'effet dans IE9
FastTrack

Je ne vois pas pourquoi pas, essayez .ie9 .actual-form table {width: 100%} dans votre CSS. J'espère que cela fonctionne pour vous.
frontendzzzguy

.ie9ne fonctionne pas car il n'a pas été mis à jour depuis 2010.
Hanna

C'est certainement l'approche la plus élégante. Personnellement, je préfère ajouter le navigateur côté serveur des sélecteurs css lors du rendu de la page.
opsb

1
cela fonctionne si vous utilisez des chaînes d'agent et ajoutez dynamiquement la classe de sélecteur au corps.
pikapika

6

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.


6

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 */
}

5

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....


4

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.


Le dernier s'applique également à IE11
CBarr

2

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

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

Seule cette solution fonctionne parfaitement pour moi.


Je sais que c'est un necrocomment, mais cela a l'air super lisse. Cependant, je ne suis pas sûr de ce qu'il fait exactement car il semble un peu arcane / byzantin. Quelqu'un connaît la sémantique de cette déclaration? (comme le _ :: et le \ 0 à la fin?)
Adam R. Turner


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

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

2

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; }
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.