it-swarm-pt.tech

IE7 CSS Scrolling Div Bug

Recentemente, deparei-me com um bug apenas no IE7 que eu pensava compartilhar; assim, quando eu vier a este site daqui a seis meses para descobrir a mesma coisa, terei em mãos.

Eu acredito que a maneira mais fácil de recriar esse bug seria o seguinte html em uma página com um doctype declarado (ele funciona corretamente no "modo quirks"/no-doctype):

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

No IE7, a div externa é um tamanho fixo e a div interna está relativamente posicionada e contém mais conteúdo (supondo que a div interna cause um estouro). Em todos os outros navegadores, isso parece funcionar conforme o esperado.

Captura de tela: bug screenshot

49
frank hadder

A solução mais fácil seria adicionar position: relative; para a div externa. Isso fará com que o IE7 funcione conforme o esperado.

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

EDIT: Versão em cache do link quebrado em waybackmachine.org

98
frank hadder