CSS
Internet Explorer Hacks

Remarques

Mode Contraste élevé dans Internet Explorer 10 et supérieur

Dans Internet Explorer 10+ et Edge, Microsoft fournit le sélecteur de support -ms-high-contrast pour exposer le paramètre «Contraste élevé» du navigateur, ce qui permet au programmeur d’ajuster les styles de leur site en conséquence.

Le sélecteur -ms-high-contrast a 3 états: active , black-on-white et white-on-black . Dans IE10 +, il n'y avait none état mais cela n'est plus pris en charge dans Edge.

Exemples

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: black-on-white) {
   .header{
      background: #fff;
      color: #000;
   }
}

Cela changera l'arrière-plan de l'en-tête en blanc et la couleur du texte en noir lorsque le mode de contraste élevé est actif et qu'il est en mode black-on-white .

@media screen and (-ms-high-contrast: white-on-black) {
   .header{
      background: #000;
      color: #fff;
   }
}

Semblable au premier exemple, mais il sélectionne spécifiquement l'état white-on-black uniquement et inverse les couleurs de l'en-tête sur un arrière-plan noir avec du texte blanc.

Plus d'information:

Documentation Microsoft sur -ms-high-contrast

Internet Explorer 6 et Internet Explorer 7 uniquement

Pour cibler Internet Explorer 6 et Internet Explorer 7, démarrez vos propriétés avec * :

.hide-on-ie6-and-ie7 {
    *display : none; // This line is processed only on IE6 and IE7
}

Les préfixes non alphanumériques (autres que les tirets et les traits de soulignement) sont ignorés dans IE6 et IE7. Ce hack fonctionne donc pour toute property: value paire property: value préfixe.

Internet Explorer 8 uniquement

Pour cibler Internet Explorer 8, placez vos sélecteurs dans @media \0 screen { } :

@media \0 screen {
    .hide-on-ie8 {
        display : none;
    }
}

Tout entre @media \0 screen { } est traité uniquement par I

Ajout de la prise en charge du bloc en ligne à IE6 et IE7

display: inline-block;

La propriété d' display ayant la valeur inline-block n'est pas prise en charge par Internet Explorer 6 et 7. Une solution consiste à:

zoom: 1;
*display: inline;

La propriété zoom déclenche la fonctionnalité hasLayout des éléments et n'est disponible que dans Internet Explorer. L' *display s'assure que la propriété non valide s'exécute uniquement sur les navigateurs affectés. Les autres navigateurs ignoreront simplement la règle.