Relative positionierter divs Höhe hinzugefügt in IE6 vor der negativen Spitze

Question

bis

Ich habe folgende

<div id=A style='height: 120px;'> 
    <div id=B style='height: 100px;'> 
    <div id=D style='height: 60px; top 0px; position: relative;'>Stuff D</div> 
    <div id=E style='height: 80px; top: -40px; position: relative;'>Stuff E</div> 
    </div> 
    <div id=C style='height: 20px;'>Footer</div> 
</div> 

In anderen Browsern als IE6, das funktioniert gut. IE6 addiert jedoch die Höhen von D & E zu 140 und zwingt B, 140 zu werden, was C um 40 nach unten drückt. Jedoch wird das obere Ende von E um 40px überlagert, wobei D überlappt, wie es sollte. Es ist nur die Box für B wird die 140 hoch nur in IE6.

Was kann ich mit dem CSS/HTML tun, damit sich IE6 verhält, ohne andere Browser zu beeinflussen, die es bekommen und B bei 100px halten?

Answer 1

Ich fand, dass margin-top: -? Px; wird das gleiche tun wie nur oben: - ??? px tut. Danke für die Hilfe. Ich werde den Überlauf versuchen: versteckt und der! Wichtig, weil sie interessant klingen.

Answer 2

Es ist nicht die Tatsache, dass die Höhen im Voraus addiert werden, die Sie durcheinander bringt --- alle Browser tun dies. Es ist die Tatsache, dass IE 6 eine andere Idee hat, was zu tun ist, wenn der height von #B Inhalt 100px überschreitet. Da Sie die gewünschte Höhe für #B kennen, können Sie dem vorhandenen Stil overflow: hidden hinzufügen.

<div id="B" style="height: 100px; overflow: hidden;">