Suche…


Bemerkungen

Diese "Hacks" können verwendet werden, um einen bestimmten Browser / Client anzusprechen. Dies kann verwendet werden, um Browser-Rendering-Unterschiede zu umgehen, indem Sie Stile in einer der oben aufgeführten Wrapper anwenden.

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.



Modified text is an extract of the original Stack Overflow Documentation
Lizenziert unter CC BY-SA 3.0
Nicht angeschlossen an Stack Overflow