Wer angehalten ist für größere Projekte seine Seiten auch dem Microsoft Internet Explorer schmackhaft zu machen, stößt recht schnell auf die Grenzen der vollkommen veralteten CSS Engine.
Ein grandioser Bug im ist hier eine mehrdimensionale Liste. Heisst, eine Liste (ol/ul), die in einer anderen liegt (oder auch in einer Tabelle).
Hier fügt der IE oberhalb der Liste einen Abstand ein, den man mit normalen Margin oder Padding angaben nicht ändern kann. Wir versuchen es:
Ein Beispiel:
<ul> <li>Irgendetwas</li> <li> <ul> <li>Irgendetwas in der zweiten Liste</li> <li>Nochetwas</li> </ul> </li> </ul>
Selbst wenn wir nun im CSS folgende Angaben machen, bleibt der Abstand der zweiten Liste:
ul, ul li, ul li ul, ul li ul li { margin: 0; padding: 0; }
Indem man allerdings die zweite Liste als inline-block definiert, kann man den Fehler beheben:
ul li ul { display: inline-block }
Da die Mozilla Engine kein inline-block kennt, wird es dort übergangen. Im Safari und Opera auf der anderen Seite führt diese Definition zu krassen Darstellungfehlern, weshalb es ratsam ist, die Definition als IE-Hack bzw. Browserweiche zu kennzeichen:
*+html ul li ul, * html ul li ul { display: inline-block; }
das *+html ist dabei speziell für den IE7, da er (eigentlich korrekter Weise) das * html igoriert.
Ich hoffe, dass ich einigen von euch ein wenig Frust nehmen konnte.
Hier gibt’s übrigens nehr über Internet Explorer 7 Hacks.
