IE7 display: inline-block CSS Bug

Jedes mal graut es mir bei einem Projekt vor den Crossbrowsertests. Heute bin ich mal wieder über den display: inline-block; Fehler im IE7 gestolpert.

Das Problem

Das Problem ist relativ einfach erklärt. Ihr habt Beispielsweise eine Navigation mit einer Liste gebaut und die Listenelemente mit display: inline-block; nebeneinander gesetzt. Ihr freut euch, dass ihr nichts floaten lassen müsst und alles ohne Probleme funktioniert. Aber dann ruft ihr den Internet Explorer 7 auf, und es funktioniert einfach mal wieder gar nichts.

Das Problem ist, dass der Internet Explorer 7 display: inline-block; nicht unterstützt.

Die Lösung

Die Lösung für dieses Problem ist angenehm einfach. Ihr sprecht einfach eure Listenelemente an und gebt ihnen display: inline; zoom: 1;. Nun sollte eure Navigation wieder korrekt sitzen.

Falls ihr nicht wisst, wie ihr Elemente für nur eine Version des Internet Explorers ansprechen könnt, könnt ihr dies in dem Artikel HTML: Conditional Comments nachlesen.

Alternativ geht es auch so:

li {
   display: inline-block;
   zoom: 1;
   *display: inline;
}

Das mit einem * gekennzeichnete display: inline; wird nur vom Internet Explorer 7 erkannt. Da das display: inline-block; eh nicht richtig interpretiert wird, führt auch diese Möglichkeit zum richtigen Ergebnis. Allerdings wird hierbei euer CSS Code unvalide.