CSS
Internet Explorer-hacks

Opmerkingen

Hoog contrast-modus in Internet Explorer 10 en hoger

In Internet Explorer 10+ en Edge biedt Microsoft de -ms-high-contrast mediaselector om de instelling "Hoog contrast" van de browser -ms-high-contrast , waarmee de programmeur de stijlen van zijn site dienovereenkomstig kan aanpassen.

De -ms-high-contrast selector heeft 3 statussen: active , black-on-white en white-on-black . In IE10 + had het ook een none status, maar dat wordt niet langer ondersteund in Edge vanaf nu.

Voorbeelden

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

Dit verandert de achtergrond van de koptekst in wit en de tekstkleur in zwart wanneer de modus Hoog contrast actief is en deze zich in de black-on-white witmodus bevindt.

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

Vergelijkbaar met het eerste voorbeeld, maar hiermee wordt alleen de white-on-black status geselecteerd en worden de koptekleuren omgekeerd naar een zwarte achtergrond met witte tekst.

Meer informatie:

Microsoft-documentatie over -ms-high-contrast

Alleen Internet Explorer 6 en Internet Explorer 7

Als u zich op Internet Explorer 6 en Internet Explorer 7 wilt richten, begint u met uw eigenschappen met * :

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

Niet-alfanumerieke voorvoegsels (met uitzondering van koppeltekens en onderstrepingstekens) worden genegeerd in IE6 en IE7, dus deze hack werkt voor elke niet-vooraf gecodeerde property: value .

Alleen Internet Explorer 8

Om Internet Explorer 8 te targeten, plaatst u uw selectors in het @media \0 screen { } :

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

Alles tussen @media \0 screen { } wordt alleen door I verwerkt

Inline Block-ondersteuning toevoegen aan IE6 en IE7

display: inline-block;

De eigenschap display met de waarde inline-block wordt niet ondersteund door Internet Explorer 6 en 7. Een tijdelijke oplossing hiervoor is:

zoom: 1;
*display: inline;

De eigenschap zoom hasLayout de hasLayout functie van elementen en is alleen beschikbaar in Internet Explorer. Het *display zorgt ervoor dat de ongeldige eigenschap alleen wordt uitgevoerd op de betreffende browsers. Andere browsers negeren gewoon de regel.