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.