web-dev-qa-db-fra.com

IE7 CSS Scrolling Div Bug

J'ai récemment rencontré un seul bug IE7 que je pensais partager, donc quand je viendrai sur ce site dans 6 mois pour comprendre la même chose, je l'aurai sous la main.

Je crois que la façon la plus simple de recréer ce bogue serait le code HTML suivant dans une page avec un doctype déclaré (cela fonctionne correctement en "mode excentrique"/no-doctype):

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

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

Capture d'écran: bug screenshot

49
frank hadder

La solution la plus simple serait d'ajouter position: relative; à la div extérieure. Cela fera fonctionner IE7 comme prévu.

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

EDIT: Version cache du lien cassé sur waybackmachine.org

98
frank hadder