Hacks für den Internet Explorer (IE)
Es gibt ja eine Menge Versionen des IE. Da aber hauptsächlich noch die Versionen 6 - 8 benutzt werden, berücksichtige ich hier die Versionen bis einschließlich 5.5 nicht.
Inhalt:
IE6 - Hack:
Für den IE6 kenne ich 3 funktionierende Hacks, die ich mit gutem Gewissen weiter empfehlen kann:
- Browserweiche im Header:
Hierbei wird eine CSS-Datei speziel für die beim IE6 anders lautende Stylsheets erstellt. Diese wird dann auf folgende Weise im Head-Bereich eingebunden:
1 <!--[if IE 6]> 2 <link type="text/css" rel="stylesheet" href="css/style_ie6.css" /> 3 <![endif]-->Im href-Tag ist natülich eure Datei einzutragen.
!! Wichtig !! => Dieser Metatag MUSS NACH dem Link-Tag auf die eigentlich CSS-Datei stehen! Sonst wird sie zuerst abgearbeitet und die gesetzten Styles werden von der normalen CSS-Datei überschrieben und der Effekt verpufft.
- Star-HTML-Hack:
Der Star-HTML-Hack ist eine CSS-Anweisungeinzig für den IE6 lesbar. Er kommt immer nach der allgemeinen CSS-Anweisung für die anderen Browser innerhalb der CSS-Datei und sieht so aus:
1 * html .class_1 {
2 width:350px;
3 height:400px;
4 color: #000000;
5 }
Da diese Schreibweise nur der IE6 liest, ist sie gerade zu ideal um diesen zu formatieren.
- CSS-Kommentarzeichen:
Mit Hilfe der CSS-Kommentarzeichen kann man ganz gut die verschiedenen IE-Versionen zum Teil sogar gleichzeitig ansprechen. Hier die Hacks, welche den IE6 ansprechen:
- spricht den IE5.5 bis IE7 an:
1 /widht:350px;
- spricht den IE6 und IE7 an:
1 *width/**/:/**/ 350px;
- spricht nur den IE5.5 und den IE6 an:
1 _width/**/:350px;
- spricht nur den IE6 an:
1 _width/**/:/**/ 350px;
IE7 - Hack:
Auch für den IE7 kann ich euch wieder 3 erprobte Hacks anbieten:
- Browserweiche im Header:
Auch hierbei wird eine CSS-Datei speziel für die beim IE7 anders lautende Stylsheets erstellt. Diese wird dann auf folgende Weise im Head-Bereich eingebunden:
1 <!--[if IE 7]> 2 <link type="text/css" rel="stylesheet" href="css/style_ie7.css" /> 3 <![endif]-->Im href-Tag ist natülich eure Datei einzutragen.
- Star-HTML-Hack:
Auch der IE7 reagiert auf einen bestimmten Star-HTML-Hack:
1 * + html .class_1 {
2 width:350px;
3 height:400px;
4 color: #000000;
5 }
Man nehm den Star-HTML-Hack des IE6 und füge zwischen dem "*" und dem "html" noch ein "+" ein, und schon wird er vom IE6 übersprungen und vom IE7 gelesen!
- CSS-Kommentarzeichen:
Beim IE7 gibt es auch noch diese CSS-Kommentarzeichen. Man kann also auch ihn dierekt in der allgemeinen CSS-Datei annsprechen. Aber immer daran denken: "Die Hacks erst nach der allgemeinen Anweisung einzubauen!
- spricht den IE5.5 bis IE7 an:
1 /widht: 350px;
- spricht den IE6 und IE7 an:
1 *width/**/:/**/ 350px;
IE8 - Hack:
Für den IE8 gibt es mittlerweile auch eine Browserweiche im Header:
- Browserweiche im Header:
Auch hierbei wird eine CSS-Datei speziel für die beim IE8 anders lautende Stylsheets erstellt. Diese wird dann auf folgende Weise im Head-Bereich eingebunden:
1 <!--[if IE 8]> 2 <link type="text/css" rel="stylesheet" href="css/style_ie8.css" /> 3 <![endif]-->Im href-Tag ist natülich eure Datei einzutragen.
Aber es gibt auch noch etwas anderes:
- den Kompatibilitätsmodus
Was die wenigsten wissen, der IE8 besitzt einen sogenannten Kompatibilitätsmodus. Gibt es Schwierigkeiten mit der Darstellung einer Website hat er hinter der Adressleiste einen Button, mit dem in diesen Modus umgeschaltet wird und der IE8 wie ein IE7 reagiert. Nun sitzt de Homepageprogrammierer nicht immer neben den Besuchern der Seite und kann ihnen sagen, dass sie umschalten sollen. Die Lösung: ein Metatag, der das für uns übernimmt:
1 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
!! Wichtig !! => Dieser Metatag MUSS direkt NACH nach dem Link-Tag auf die eigentlich CSS-Datei stehen! Er hat sonst keinerlei Wirkung! Er hat nur Einfluss auf direkt vor ihm stehende CSS-Dateien. Wenn man zwei Dateien ansprechen will, so muss nach jeder der Hack stehen!
weitere IE Tips und Tricks:
Es gibt allerdings noch eine andere Möglichkeit den IE8 und andere indirekt zu optimieren:
- umgekehrte Browserweiche im Header:
Man kann sich eine Browserweiche definieren, die den IE8 ausschliest und alle anden lesen lässt:
1 <!--[if !IE 8]> 2 <link type="text/css" rel="stylesheet" href="css/style_no_ie8.css" /> 3 <![endif]-->
Durch dieses "!" wird dem IE8 gesagt, das diese CSS-Datei ihn nicht zu interesieren hat.
Dieser Trick funktionert allerdings auch für alle anderen IE-Versionen.
- weitere CSS-Kommentarzeichen:
Hier noch ein paar CSS-Kommentarzeichen für andere IE-Versionen:
- spricht alle außer dem IE5.5 an:
1 width:/**/350px;
- spricht alle außer dem IE5 an:
1 width/**/: 350px;
- spricht alle außer dem IE5 und IE5.5 an:
1 width/**/:/**/350px;
Bei CSS-Kommentarzeichen zwischen Anweisung und Doppelpunkt steigt der IE5 aus und ignoriert die Anweisung. Bei CSS-Kommentarzeichen nach dem Doppelpunkt und vor dem Wert mit Leerzeichen, steigt der IE5.5 aus und ignoriert die Anweisung. Verwendet man die Kommentarzeichen sowohl vor als auch nach dem Doppelpunkt, steigen IE5 und IE5.5 aus. setzt man noch einen Underline vor die Anweisung, versteht das der IE7 nicht.