Tutorials

Einige nützliche Hilfen und Code-Schnipsel, die ich immer wieder benötige und deshalb hier für alle sammle.

Zurück zur Übersicht

CSS Hacks IE 8, IE7 und IE6 direkt ansprechen

#Tutorials#CSS

Jeder der schon einmal eine Webseite erstellt hat wird merken, dass eigentlich alle Version unter dem 9er Probleme machen bei der Darstellung. Leider sind viele Leute noch mit alten Windows Rechner und noch ältereren Browsern unterwegs. Der IE6 ist zwar mitlerweile fast ausgestorben, doch haben noch eine große Anzahl von Usern den IE 7 und 8. Hier habe ich einige Schnipsen, bzw. CSS-Hacks um die IE's direkt zusammen oder einzelnd anzusprechen.

Internet Explorer 8 und darunter

Der Trick um alle Internet Explorer Versionen kleiner als 9 anzusprechen ist folgender:


.class {
    background: blue; /* Jeder Browser */
    background: red\9; /* IE8 und darunter */
}

Das "9" ist hier der Trick. Dies funktioniert aber wirklich nur für IE's mit der Version < 9. (IE 8 und darunter)

Nur den Internet Explorer 8 geht folgendermaßen


.class {
    background: blue; /* Jeder Browser */
    background: red\9; /* IE8 und darunter */
    background/***/: blue\9 /* Nur IE8 */
}

Internet Explorer 7 und darunter

Um Versionen kleiner 7 anzusprechen, muss ein Stern * vor das entsprechende Attribut gesetzt werden.


.class {
    background: blue; /* Jeder Browser */
    background: red\9; /* IE8 und darunter */
    *background: yellow; /* IE7 und darunter */
}

CSS Anweisungen für den IE7 gehen also mit einem "*" vor der Anweisung.

Internet Explorer 6

Zusätzlich zu den oberen beiden Hacks, gibt es auch noch die Möglichkeit ausschließlich den Internet Explorer 6 anzusprechen. Dies funktioniert nach dem gleichen Prinzip wie die Sternmethode, nur das ein Unterstrich verwendet wird.


.class {
    background: blue; /* Jeder Browser */
    background/***/: blue\9 /* Nur IE8 */
    background: red\9; /* IE8 und darunter */
    *background: yellow; /* IE7 und darunter */
    _background: gray; /* Nur IE6 */
}

Kommentare

  • Nike
    Daaaankeee!!! Endlich, ich bin noch Anfänger und habe lange gesucht, nicht aufgeben und dann diesen Beitrag gefunden. Nun funktioniert's!
    Antworten
    • Andre Rinas
      Freut mich, dass ich dir helfen konnte :) Musst du immernoch die alten IE's unterstützen du Ärmster :P
      Antworten
  • Norbert
    Hi Andre
    sag gibt es auch einen hack für den letzten IE11 und für den IE10
    Antworten
  • riepichiep
    Geht das ganze auch mit Zahlencode (#012345) oder müssen es Farbnamen sein?
    Antworten
    • Andre Knieriem
      Hallo, aber natürlich geht das. Du kannst jeden Style, nicht nur Farben so einstellen.

      Grüße
      André
      Antworten
      • riepichiep
        Ich hatte{color:#0000cc9} und das wurde schwarz statt bklau. Habe ich einen Fehler im code?
        Antworten
        • Andre Knieriem
          Hallo ja hast du. Hex Zahlen sind immer nur 6 Stellen, du hast 7 Stellen nach dem #-Zeichen. Ich denke deine Farbe ist #000cc9;

          Grüße
          Antworten
          • riepichiep
            Neuer Versuch: Im CSS steht nun
            color: #FEFFF2;
            color: blue9;

            lasse ich "color: blue9;" weg, wird es im IE auch nahezu weiß. Lass ich die Zeile da, wird es allerdings schwarz statt blau ...
            Antworten
        • Andre Knieriem
          Hallo riepichiep,

          du hast Recht und ich merke es erst jetzt! In meinem Code hatte Wordpress die Backslashes entfernt. Sie sind nun wieder drin! Also wäre der richtige Code {color:#0000cc\9}
          Antworten
  • Shad
    Sehr schöner Beitrag. Genau was ich gesucht habe.
    Ich muss allerdings in IE8 und darunter den Hack "!important" zum laufen bekommen. Diese Browser ignorieren diese Wertigkeit leider.
    Wie spreche ich also IE7 und IE8 damit an?
    Antworten
    • Andre Knieriem
      Hi Shad,

      das müsste doch genauso gehen oder? Also:
      [code]
      background: red9 !important;

      bzw:
      background/***/: blue9 !important;
      *background: blue !important;
      [/code]

      Grüße
      André
      Antworten

Hinterlasse einen Kommentar

Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Kommentar wird gespeichert
Danke für deinen Kommentar! Sobald er freigegeben wurde erscheint er hier.