Peek-a-boo im IE... :-(

Da will man einfach nur eine schöne Website erstellen und sich an die Standards halten, und dann kommt der IE (Internet Explorer) und macht wieder alles dahin.

Meine Galerie war bis heute eigentlich nicht wirklich sinnvoll bedienbar im IE, da einige Elemente der Seite unverständlicherweise nicht bzw. nur manchmal dargestellt wurden. Teilweise sogar nur dann dargestellt wurden, wenn man mit der Maus über einen Link oder ähnliches gefahren ist.

Dieser Bug ist bekannt und ist unter dem Namen Peek-a-boo im Netz zu finden. Z.B. auf der folgenden Seite:

Peek-a-boo IE6 Bug

Gefixt habe ich das ganze dann bei mir mit dem sog. holy hack. :) D.h. einem umliegenden Element (welches, dass musste ich experimentell bestimmen) einfach per CSS eine beliebige Höhe angeben. In meinem Fall habe ich also folgendes eingetragen:

#content {
  height: 1%;
}

Da dieser Hack eigentlich nur für den IE nötig ist, habe ich eine zusätzlich CSS-Datei erstellt, die nur spezielle CSS-Einstellungen für den IE beinhalten. Diese wird über einen vom IE zusätzlich angebotenen Tag includiert, der von allen anderen Browsern als Kommentar ignoriert wird (Microsofts Programmierer waren sich offensichtlich bewusst, dass ihr Browser anders ist, als die anderen):

<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="/css/jerri-hates-ie.css" />
<![endif]-->

Auf diese einfache Art und Weise kann man in der eigentlichen CSS-Datei alles Standard-Konform machen, und evtl. in der danach geladenen CSS-Datei zusätzliche Parameter setzen bzw. überschreiben, um alles im IE auch richtig aussehen zu lassen. Ich denke, auf diese Art und Weise bleibt die CSS-Datei sauberer, als wenn man sich mit diversen CSS-Hacks behilft, die die CSS-Datei nur unübersichtlich machen.

Interessant ist in diesem Zusammenhang noch, dass der Ausnahme-Tag auch auf spezielle Version des IE abfragen kann. Zusätzliche Informationen kann man unter dem Begriff "Conditional comments" im Netz bzw. z.B. hier finden:

Conditional comments of IE