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>