Position absolute e conteúdo dinâmico (Ajax)
Por Guilherme Serrano em Internet, Programação,
Corrigindo o posicionamento de elementos com posição absoluta (no Internet Explorer) após alterações na página como o carregamento de conteúdos dinâmicos, adição de imagens, etc.
Esses dias tava com dando problema de posicionamento em um HTML no trabalho.
Uma div estava com posicionamento errado no Internet Explorer (6 e 7) e curiosamente isto só acontecia em uma das páginas, nas outras com html semelhante (e esta mesma div) o erro não acontecia.
O @tivasconcelos me alertou que aquele elemento tinha o position setado como absolute, estudando um pouco o html e js vi que o problema acontecia quando alguns elementos da página eram redimensionados devido ao carregamento de html com ajax.
O problema
No Internet Explorer o posicição quando é absoluta é calculada logo depois que a página é carregada e não é mais atualizada automaticamente.
Se algum elemento tiver as dimensões alteradas (normal quando o conteúdo é carregado dinamicamente por ajax) o elemento com posição absoluta vai ficar lá, estático.
A solução
Sabendo do que causa o problema a solução é simples: atualizar a posição do elemento.
Não é necessário calcular, basta setar novamente a posição como absoluta cada vez que as dimensões de algum elemento da página (que pode influenciar no posicionamento do elemento em questão) for alterado.
Segue o código em jQuery para a solução:
$(".posicao-absoluta").css({position:"absolute"});
No meu caso no success do carregamento em ajax eu adicionei esta linha, forçando o reposicionamento no IE.
Dúvidas, angústias, críticas e sugestões nos comentários. :D