Browseranzeige

[molily]

"inline" für IE statt "inline-block" sollte doch reichen? [http://bittersmann.de/articles/inline-block/#solution]

Der Hack besteht ja nicht aus display:inline, sondern aus hasLayout für Inline-Elemente.

Wenn du notierst

li { display: inline-block }
* html li { display: inline }

Dann würde man denken, dass display im IE 6 nun den Wert inline hat und die erste Deklaration schlicht überschrieben wird. Das ist aber nicht (vollständig) der Fall.

Es ist im IE 6 *nicht* dasselbe wie direkt zu schreiben:

li { display: inline }

Es ist auch nicht identisch mit

li { display: inline-block; display: inline }

Die Aufteilung in zwei Regeln macht vielmehr folgendes:

• display: inline-block triggert hasLayout
• display: inline fügt *dann* noch ein Inline-Verhalten hinzu - hasLayout bleibt

Das ist auch unter Resetting hasLayout beschrieben:

»The display-property differs: while 'inline-block' sets haslayout = true, the flag will not be reset to false later on by overriding the value with 'block' or 'inline' in another rule set.«

hasLayout ist nun etwas ganz anderes als display:inline-block und im IE näher an Float (wenn auch ohne die seltsamen Float-spezifischen Bugs), weil eine Float-Box ebenfalls hasLayout hat. Dieses Sonderverhalten von hasLayout-Boxen, was man in standardkonformen Browsern nicht einmal teilweise hat, weil display:inline-block dort keinen BFC auslöst, muss man zu zähmen wissen. Das kommt in einem einfachen Beispiel natürlich nicht rüber, aber in einem komplexen Layout würden diese »Spalten« wiederum Mehrspaltigkeit beinhalten. Spätestens dann werden einem starke Unterschiede zwischen den Browsern auffallen.

Mathias