IE-Bug: oberer Abstand in Höhe von border-Top des Vaters

[Cheatah]

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.

[Gunther]

Hi,

Ü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.

Kurze Nachfrage:

<div style="border: solid red; border-width: 50px 40px 30px 20px;">
    <span style="float: left; border: 1px solid green;">Foo</span>
    <div style="height: 0; margin-top: -50px; clear: left; border: 1px solid blue;">Bar</div>
</div>

  
Der negative margin-top Wert (= border-top Wert) behebt das Problem bei mir, oder habe ich etwas "übersehen"?  
  
Gruß Gunther

[Cheatah]

Hi,

Der negative margin-top Wert (= border-top Wert) behebt das Problem bei mir, oder habe ich etwas "übersehen"?

okay, ein negativer margin kann helfen. Das Problem ist aber, dass da ein Abstand entstanden ist, der offenbar _kein_ margin ist - andernfalls würde margin:0 ausreichen. Du hast also einen Workaround gefunden, leider jedoch keine Lösung :-)

Cheatah

[Axel Richter]

Hallo,

Du hast also einen Workaround gefunden, leider jedoch keine Lösung :-)

Welche Lösung? Es ist ein Bug beim Rendern. Ohne Kenntnis des Quellcodes der Rendering Engine wird man kaum feststellen können, was da genau falsch läuft.

Weiterer Workaround: Hebe den äußeren DIV auch in den Status "hasLayout" und es stimmt wieder.

viele Grüße

Axel

[Gunther]

Hi,

Du hast also einen Workaround gefunden, leider jedoch keine Lösung :-)

kann es die für Bugs denn überhaupt geben?

Wie du ja bereits geschrieben hast:

Dieser Abstand hat die Höhe des border-top des umgebenden Elements.

Woher soll man wissen, warum sich der IE so verhält?
Den Auslöser für den Bug hattest du ja auch schon erwähnt, nämlich

"Jetzt gebe man dem inneren <div> mal Layout.".

Da man die hasLayout-Eigenschaft nicht aufheben/ rückgängig machen kann, muss man sich imho in solchen Fällen halt mit dem Würgaround zufrieden geben.

Mir war dieser Bug bisher aber auch unbekannt, und Nein - erklären kann ich ihn auch nicht.

Gruß Gunther

[Cheatah]

Hi,

Du hast also einen Workaround gefunden, leider jedoch keine Lösung :-)
kann es die für Bugs denn überhaupt geben?

im Prinzip ein guter Einwand - der natürlich von der Definition des Begriffes abhängt. Ich sehe z.B. ein "display:inline" bei gefloateten Elementen als Lösung gegen den Doubled Float Margin Bug an, da es eine Angabe ist, die, von der Fehlerbehebung abgesehen, nirgendwo eine Änderung bewirkt (bewirken darf).

Woher soll man wissen, warum sich der IE so verhält?

Bei manchen Problemen habe ich mittlerweile eine gewisse Vorstellung entwickelt :-)

Da man die hasLayout-Eigenschaft nicht aufheben/ rückgängig machen kann, muss man sich imho in solchen Fällen halt mit dem Würgaround zufrieden geben.

Axel hat herausgefunden (danke!), dass Layout im äußeren Container das Problem behebt. Wenn dies gefahrlos hergeführt werden kann, sehe ich es als Lösung an. Falls Standardkonformität als dehnbar betrachtet wird, tut es beispielsweise bereits zoom:1, wenn man die Breite festlegen kann, umso besser - und ansonsten bleibt leider auch wieder nur der Weg über irgend einen Hack.

Mir war dieser Bug bisher aber auch unbekannt, und Nein - erklären kann ich ihn auch nicht.

Schade :-)

Cheatah

[Joachim]

Hi,

<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>

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.

Leider bin ich kein Mensch der grossen Erklärungen, allerdings kann ich Dir nur eine einfache Lösung anbieten: Wie oft, wenn IE mit den Höhen durcheinandergerät, hilft ein height:1px (für das äussere Div, natürlich in CC's versteckt). Offenbar zwingt ihn diese Dummy-Höhe zum erneuten Rendern, so dass die Darstellung wieder stimmt.

Gruesse, Joachim

[wahsaga]

hi,

Wie oft, wenn IE mit den Höhen durcheinandergerät, hilft ein height:1px (für das äussere Div, natürlich in CC's versteckt). Offenbar zwingt ihn diese Dummy-Höhe zum erneuten Rendern, so dass die Darstellung wieder stimmt.

height ist einer der Auslöser für hasLayout, und das auch dem äußeren Div zu verpassen, hatte Axel ja schon vorgeschlagen.

gruß,
wahsaga