Bug de div de rolagem CSS do IE7
-
09-06-2019 - |
Pergunta
Recentemente me deparei com um bug exclusivo do IE7 que pensei em compartilhar, então quando eu for a este site daqui a 6 meses para descobrir a mesma coisa, eu o terei em mãos.
Acredito que a maneira mais fácil de recriar esse bug seria o seguinte html em uma página com um doctype declarado (funciona corretamente no "modo quirks"/no-doctype):
<div style="overflow: auto; height: 150px;">
<div style="position: relative;">[...]</div>
</div>
No IE7, o div externo tem tamanho fixo e o div interno está relativamente posicionado e contém mais conteúdo (assumindo que o div interno causa um estouro).Em todos os outros navegadores, isso parece funcionar conforme o esperado.
Captura de tela:
Solução
A solução mais fácil seria adicionar position: relative;
para o div externo.Isso fará com que o IE7 funcione conforme planejado.
(Ver: http://rowanw.com/bugs/overflow_relative.htm).
EDITAR: Versão em cache do link quebrado em waybackmachine.org