Wer sein Homepage Design fertig gestellt hat, wird oft bei den IE Browsern eine Überraschung erleben. Vor allem der IE6 und teilweise auch noch der IE7 machen gerne Probleme und das Homepage Design sieht nicht selten unansehnlich in diesen Browserversionen aus. Abhilfe schaffen hier einzelne CSS Hacks. Mit einem CSS Hack kann eine andere Darstellung in dem individuell angesprochenen IE erreicht werden.
Manche CSS Eigenschaften kennen gerade die älteren IE Browser noch nicht, oder aber sie werden vom IE einfach anders interpretiert, als der Designer das wünscht. Gerade der IE6 tanzt in diesem Bereich meiner Erfahrung nach oft ziemlich aus der Reihe und glänzt mit unsichtbaren Rändern, die er hinzufügt.
Ich greife in diesen Fällen immer gerne auf einzelne CSS Hacks zurück, die ich den CSS Bereichen, mit denen der entsprechende IE Browser Probleme hat, zuweise. Wichtig ist dabei vor allem dass die einzelnen Browser jeweils mit einem eigenen CSS Hack anzusprechen sind, selbst wenn derselbe CSS Hack zum Einsatz kommen soll.
CSS Hacks werden ganz einfach nur in die CSS Datei geschrieben. Ich bevorzuge der Übersicht halber den entsprechenden CSS Hack direkt unter den jeweiligen CSS Bereich zu schreiben. Sollte ich im Nachhinein den Bereich ändern, weiß ich auch gleich, dass es an dieser Stelle mit dem jeweiligen IE Browser ein Problem gibt. CSS Hacks haben den Vorteil, dass sie jeweils nur in dem angesprochenen Browser Anwendung finden. Von allen anderen Browsern werden die CSS Hacks ignoriert.
In die CSS Hacks kommen immer nur die geänderten Formatierungen. Alle anderen CSS Darstellungen aus der jeweiligen Klasse oder ID bleiben gleich, werden also übernommen, und müssen im CSS Hack nicht extra aufgeführt werden.
CSS Hack für den IE6
Der IE6 wird mit dem so genannten Star-HTML-Hack angesprochen. In dem folgenden Beispiel setze ich einen CSS Hack für den IE6 mit unterschiedlicher Breite für die Klasse “seite”. Das padding dieser Klasse bleibt gleich:
.seite { width: 300px; padding:5px; }
* html .seite { width: 290px; }CSS Hack für den IE7
Um den IE7 mit einem CSS Hack anzusprechen wird dem Star-HTML-Hack ein Plus-Zeichen hinzugefüft. In dem folgenden Beispiel setze ich einen CSS Hack für den IE6 sowie auch für den IE7 mit unterschiedlicher Breite für die Klasse “seite”. Beim IE7 verändere ich zusätzlich noch das padding:
.seite { width: 300px; padding:5px; }
* html .seite { width: 290px; }
* + html .seite { width: 295px; padding:3px; } CSS Hacks für den IE8
Bis dato habe ich persönlich noch keinen CSS Hack für den IE8 benötigt. Sollte ein solcher CSS Hack einmal notwendig werden, kann der Browser mit einem Meta Tag im HEAD-Bereich angewiesen werden, dass der IE8 wie der IE7 reagiert und damit die CSS Hacks für den IE7 Anwendung finden:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />Wer noch weitere CSS Hacks wie auch weitere grundlegende Infos zu CSS Hacks für die einzelnen Browser sucht, der wird auf der Seite css-hack.de mit Sicherheit fündig.
