WebDesign - Tips und Tricks - IE7-Bugs : clear table

Nichtanzeige einer relativ positionierten Box mit geclearter Tabelle

DIV { position:relative }
DIV { float:right }
TABLE { clear:right }

Der IE 6 zeigt hier zumindest das gefloatete Element und den Tabellenrahmen noch an, während im IE 7 die komplette Box verschwindet: <div class="container Workaround">DIV { position:relative } <div class="box"> <div>DIV { float:right }</div> <table><tr><td>TABLE { clear:right }</td></tr></table> </div> </div> .box { position: relative; } .box div { float: right; } .box table { clear:right; } .box * { border:1px solid black; }

Workaround: .box { min-height:1em; } * html .box { height:1em; } Auch dieser Bug ist eine Folge des bekannten HasLayout-Problems, das der IE 7 unter bestimmten Bedingungen immer noch hat. Dieser Workaround ist daher nur erforderlich, wenn sich in der Box vor der Tabelle keine im Fluss belassenen Inhalte (ein geschütztes Leerzeichen würde schon ausreichen) befinden.

DIV { position:relative }
DIV { float:right }
TABLE { clear:right }