IE7 CSS Bug de défilement div

Question

Je suis récemment tombé sur un bug IE7 uniquement que je pensais partager. Alors, lorsque je visiterai ce site dans 6 mois pour comprendre la même chose, je l’aurai sous la main.

Je pense que le moyen le plus simple de recréer ce bogue serait le code HTML suivant dans une page avec un doctype déclaré (il fonctionne correctement dans le mode "quirks mode" / no-doctype):

<div style="overflow: auto; height: 150px;">
    <div style="position: relative;">[...]</div>
</div>

Dans IE7, la division externe a une taille fixe et la division interne est relativement positionnée et contient plus de contenu (en supposant que la division interne provoque un débordement). Dans tous les autres navigateurs, cela semble fonctionner comme prévu.

Capture d'écran:

Answer 1

La solution la plus simple consisterait à ajouter position: relative; au div externe. Cela fera fonctionner IE7 comme prévu.

(voir: http://rowanw.com/bugs/overflow_relative.htm ).

EDIT: Cache la version du lien rompu sur waybackmachine.org