Erro de posicionamento relativo / absoluto do IE7, com conteúdo da página modificado dinamicamente
Eu queria saber se alguém tem uma idéia de como lidar com o seguinte problema no IE7:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>IE7 absolute positioning bug</title>
<style type="text/css">
#panel { position: relative; border: solid 1px black; }
#spacer { height: 100px; }
#footer { position: absolute; bottom: 0px; }
</style>
<script type="text/javascript">
function toggle() {
var spacer = document.getElementById("spacer");
var style = "block";
if (spacer.style.display == "block" || spacer.style.display == "") {
style = "none";
}
spacer.style.display = style;
}
</script>
</head>
<body>
<div id="panel">
<button onclick="toggle();">Click me</button>
<br /><br /><br />
<div id="spacer"></div>
<div id="footer">This is some footer</div>
</div>
</body>
</html>
Ao executar isso no IE7, você verá que o elemento "rodapé" permanece após modificar o CSS para "painel". O mesmo exemplo testado no IE8, FF e Chrome se comporta exatamente como o esperado.
Eu já tentei atualizar a classe do elemento, mas isso não funciona se a janela do navegador foi aberta maximizada e nenhuma outra alteração de tamanho foi feita na janela (que é cerca de 90% dos casos de uso que temos para o nosso produto ... . :() Estou preso a uma solução baseada em CSS, mas acho que posso abrir uma exceção neste caso se puder ser facilmente específica do IE7 (o que significa que outros navegadores se comportarão de maneira padrão com isso) .
Por favor ajude!