CSS Hack für IE6 (und davor)

Normalerweise versuche ich ja immer, Sachen, die sog. Browserhacks verwenden, zu vermeiden. Bisher hat das auch immer geklappt, aber heute hatte ich da ein ganz nerviges Problem mit Farbunterschieden bei Hintergrundgrafiken (PNG und JPG gemischt), welches sich zudem noch zwischen IE und Firefox beispielsweise unterschied. Hier blieb keine Alternative zu einem Hack.

Der wohl beliebteste CSS-Hack für den Internet-Explorer ist der sog. Star-HTML-Hack (oder Star-Hack oder Stern-Hack). Dieser wird von Internet Explorern bis zur Version 6.0 "unterstützt" und funktioniert folgendermaßen:

  #container{width:500px;}

  * html #container{
    width:400px;
  }

Oben in der ersten Zeile definiere ich eine Breite für das Element mit der ID "#container". Dies gilt für alle Browser. Die nächste Definition gilt nur für den IE und spricht ein "beliebiges Element, welches vom HTML-Element gefolgt wird" an. Definitionsgemäß ist das HTML-Element immer das erste/oberste in einem HTML-Dokument. Daher kann das normalerweise nie zutreffen. Der IE jedoch ignoriert einen Sternchen-Selektor vor dem html und interpretiert die CSS-Anweisungen.

Für den IE7 gibt es eine erweiterte Version des Star-Hacks, welcher ähnlich funktioniert:

  #container{width:500px;}

  *:first-child+html #container{
    width:400px;
  }

Wichtig hierbei ist der First-Child-Selektor, da Opera die Anweisungen sonst auch interpretiert.