Hi,
man nehme:
<div style="border: solid red; border-width: 50px 40px 30px 20px;">
<span style="float: left; border: 1px solid green;">Foo</span>
<div style="clear: left; border: 1px solid blue;">Bar</div>
</div>
und schaue sich dies im IE an. Die inneren Rahmen tun nichts zur Sache, sie dienen nur der Verdeutlichung; der Rahmen des äußeren Elements ist wichtig. Ebenfalls unwichtig ist, um was es sich bei den inneren Elementen handelt. Das clearende Element muss natürlich (aus CSS-Sicht) Block-Level sein, damit die clear-Eigenschaft greift.
Bisher ist das Ergebnis noch nicht sonderlich erschreckend, es entspricht dem, was man erwarten möchte. Jetzt gebe man dem inneren <div> mal Layout[1], beispielsweise über height:0px - und staune ob des Irrsinns, den der IE auszuleben gedenkt: Über dem <div> erscheint ein Abstand. Dieser Abstand hat die Höhe des border-top des umgebenden Elements. Unnötig zu sagen, dass jedwede margin-Angaben ignoriert werden.
Soweit ich es ermitteln konnte, ist obiger Code ein minimierter Testfall, der alle Constraints genau abbildet[2] (von den verdeutlichenden Rahmen abgesehen). Im Netz konnte ich nichts darüber finden, dass jemand schon einmal darauf gestoßen wäre. Ist der Bug "neu"? Lehnt er sich an einen bekannten Bug an, ist es vielleicht eine Variante des Creeping Text Bugs? Hat sich irgend jemand bereits damit beschäftigt? <huestel>Kann ihn jemand erklären?</huestel> :-)
Cheatah
[1] Die berüchtigte hasLayout-Eigenschaft des IE.
[2] Äußeres Element mit border-top, Inhalt beginnt mit Floats, ein direkt folgendes Block-Level-Element mit Clear auf diese Floats und hasLayout triggert und besitzt(?) diesen Bug. Verhindert wird er, wenn auf die Floats ein nicht-gefloateter Inhalt folgt.
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes