hauteur divs ajouté positionnée par rapport dans IE6 avant le sommet négatif

Question

je les suivantes

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

Dans les navigateurs autres que IE6, cela fonctionne très bien. Cependant, IE6 ajoute les hauteurs de D & E à 140 et force B à devenir 140, ce qui fait baisser C de 40. Cependant, le sommet de E est rendu 40px chevauchant D comme il se doit. C'est juste la case pour B devient la 140 haute seulement dans IE6. Que puis-je faire avec le CSS/HTML pour faire IE6 se comporter sans affecter les autres navigateurs qui l'obtiennent et garder B à 100px?

Answer 1

J'ai trouvé que margin-top: - ?? px; fera la même chose que juste en haut: - ?? px fait. Merci pour l'aide. Je vais essayer le débordement: caché et le! Important, car ils semblent intéressants.

Answer 2

Ce n'est pas le fait que les hauteurs sont additionnées à l'avance qui vous gâchent tous les navigateurs. C'est le fait que IE 6 a une idée différente de ce qu'il faut faire lorsque le height du contenu de #B dépasse 100px. Puisque vous connaissez la hauteur que vous voulez pour #B, vous pouvez ajouter overflow: hidden au style existant.

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