Der Internet Explorer von Microsoft ist bekannt für die fehlerhafte Interpretation von CSS-Eigenschaften. Um das Problem zu lösen, greift man häufig auf Conditional Comments zurück, um gezielt einzelne Versionen des Internet Explorers anzusprechen und die Fehler zu korrigieren. Für den IE10+ existieren leider keine Conditional Comments mehr und ihr bekommt Schwierigkeiten, falls ihr speziell für diesen Browser Elemente gesondert ansprechen wollt. Doch mit einem CSS-Hack lässt sich das Problem lösen.

CSS-Hack: -ms-high-contrast im IE10

Mit dem Media Query -ms-high-contrast könnt ihr Elemente speziell für den Internet Explorer 10 ansprechen und stylen. Dieser Media Query ist eine Eigenschöpfung von Microsoft und ihr werdet ihn daher nicht in der W3C-Spezifikation finden.

Der Query wurde mit Windows 8 zusammen eingeführt und wird seit Microsofts Edge-Browser nicht mehr unterstützt. Gedacht war der Media Query zur Unterscheidung von Bildschirmen mit verschiedenen Kontraststufen. Durch den Vendor-Präfix -ms- ist dieser Hack – im Vergleich zu vielen anderen Hacks – sogar standardkonform. Zusätzlich gewährleistet der Präfix, dass dieser Media Query wirklich nur vom Internet Explorer interpretiert wird. Durch Kombination der Werte active und none wird immer der Internet Explorer 10 angesprochen, egal in welchem Kontrastmodus sich die Seite befindet.

Folgendes Code-Beispiel verdeutlicht die Funktionsweise:


.box {
  height: 100px;
  background: green;
}

/* Die Box bekommt nur im Internet Explorer 10 einen roten Hintergrund. */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .box {
    background: red;
  }
}

Quellen / Links

Geschrieben von Robert Menzel

Benutzerbild

Robert arbeitet als Frontend-Developer und Web-Designer bei kulturbanause. Zu seinen Aufgaben gehören die visuelle Gestaltung und die technische Umsetzung von Websites, eCommerce-Shops oder dessen Kombination. Besonders gerne übernimmt er die Entwicklung individueller und anspruchsvoller Websites mit umfangreichen ineinandergreifenden Funktionen, getreu dem Motto: »Der beste Lack bringt nichts, wenn die Maschine darunter nicht läuft.«

Feedback & Ergänzungen – 5 Kommentare

  1. Mario Ohibsky
    schrieb am 28.11.2016 um 23:17 Uhr:

    Es ist echt traurig, dass MS immer noch keinen Browser bietet, der CSS korrekt interpretiert, vor allem im Huinblick darauf, dass die Conditional Comments ausgemerzt wurden.

    @Tanja: Der obige Hack funzt auch mit dem IE 11, bei mir zumindest mit der aktuellen Version 11.0.36

    Antworten
  2. Tanja
    schrieb am 31.08.2015 um 10:46 Uhr:

    Wäre wirklich super, wenn mir jemand eine Lösung verraten könnte

    Antworten
  3. Tanja
    schrieb am 26.08.2015 um 15:40 Uhr:

    Wie kann man den alle Internet Explorer ansprechen? Also nur die Internet Explorer bis Version 11?
    Danke schon mal für eure Hilfe

    Antworten
  4. Boris Kaiser
    schrieb am 21.08.2015 um 15:58 Uhr:

    Eine sehr gute Sammlung solcher CSS-Hacks findet man auch auf Browserhacks (http://browserhacks.com/).

    Antworten
    • Jonas Hellwig
      schrieb am 22.08.2015 um 10:50 Uhr:

      Eine großartige Quelle! Vielen Dank!

      Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →