CSS
Internet Explorer-Hacks

Bemerkungen

High Contrast-Modus in Internet Explorer 10 und höher

In Internet Explorer 10+ und Edge bietet Microsoft die -ms-high-contrast Medien an, um die Einstellung "High Contrast" im Browser anzuzeigen, wodurch der Programmierer die Stile der Site entsprechend anpassen kann.

Der -ms-high-contrast hat 3 Zustände: active , black-on-white und white-on-black . In IE10 + hatte es auch none Status, der in Edge jedoch nicht mehr unterstützt wird.

Beispiele

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

Dadurch wird der Hintergrund der Kopfzeile in Weiß und die Textfarbe in Schwarz geändert, wenn der Hochkontrastmodus aktiviert ist und sich der black-on-white Modus befindet.

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

Ähnlich wie im ersten Beispiel, dies wählt jedoch nur den white-on-black Status aus und invertiert die Header-Farben in einen schwarzen Hintergrund mit weißem Text.

Mehr Informationen:

Microsoft-Dokumentation zu -ms-high-contrast

Nur Internet Explorer 6 und Internet Explorer 7

Um Internet Explorer 6 und Internet Explorer 7 als Ziel festzulegen, starten Sie Ihre Eigenschaften mit * :

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

Nicht-alphanumerische Präfixe (mit Ausnahme von Bindestrichen und Unterstrichen) werden in IE6 und IE7 ignoriert. Daher funktioniert dieser Hack für jedes nicht Präfix- property: value .

Nur Internet Explorer 8

Um Internet Explorer 8 als Ziel @media \0 screen { } , wickeln Sie Ihre Selektoren in @media \0 screen { } :

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

Alles zwischen @media \0 screen { } wird nur von I verarbeitet

Hinzufügen von Inline-Block-Unterstützung zu IE6 und IE7

display: inline-block;

Die display mit dem Wert von inline-block wird von Internet Explorer 6 und 7 nicht unterstützt. Eine Problemumgehung hierfür ist:

zoom: 1;
*display: inline;

Die zoom Eigenschaft löst die hasLayout Funktion von Elementen aus und ist nur in Internet Explorer verfügbar. Die *display stellt sicher, dass die ungültige Eigenschaft nur auf den betroffenen Browsern ausgeführt wird. Andere Browser ignorieren die Regel einfach.