suit: inline-block / inline IE6 + 7 Verschwindibus-Bug

Beitrag lesen

Kurz und schmerzlos: http://bittersmann.de/articles/inline-block/

Einen Testcase kann ich leider nicht erstellen, da ich den Fehler abgespeckt nicht reproduzieren kann und die Originalseiten nicht herzeigen darf - aber dennoch hier die Info

Ich hatte folgendes Problem nun bereits zwei Mal: sobald man etwas inline-block (und für den alten IE mit inline) formatiert, verschwinden im IE sämtliche Elemente. Im ersten Fall stieg ich dafür einfach auf float um, weil es egal war - in diesem Fall müssen die Elemente aber zentriert sein. Float ist keine Option, text-align: center muss her.

HTML (stark vereinfacht) eine Liste mit Links:
<ul><li><a /></li><li><a /></li></ul>

inline-block liegt auf den a-Elemente, es spielt aber hierbei keine Rolle ob man das ganze auf die li-Elemente direkt verschiebt. Das ul-Element ist sichtbar, sämtliche li- und a-Elemente verschwinden aber und sind nicht mehr aufzufinden.

Lösung ist trivial: ein Zeichen (kein Whitespace) zwischen den Listencontainer und das erste Listenelement - z.B. ein geschütztes Leerzeichen.
<ul>x<li><a /></li><li><a /></li></ul>

Problem: die Sache ist dann nicht mehr valide.

Weitere Lösung ist, ein leeres Listenelement mit einem geschützen Leerzeichen darin einzufügen - inline-block muss dann aber auf den a-Elementen liegen - ist valide, aber nicht schön.
<ul><li> </li><li><a /></li><li><a /></li></ul>