Quando o IE7 recalcula os estilos? Não funciona de maneira confiável quando uma classe é adicionada ao corpo
Eu tenho um problema interessante aqui. Estou usando uma classe no elemento como uma opção para gerar uma boa quantidade de comportamento de layout no meu site.
Se a classe é aplicada, certas coisas acontecem e, se a classe não é aplicada, elas não acontecem. Javascript é usado para aplicar e remover a classe. O CSS relevante é mais ou menos assim:
.rightSide { display:none; }
.showCommentsRight .rightSide { display:block; width:50%; }
.showCommentsRight .leftSide { display:block; width:50%; }
E o HTML:
<body class="showCommentsRight">
<div class="container"></div>
<div class="leftSide"></div>
<div class="rightSide"></div>
</div>
<div class="container"></div>
<div class="leftSide"></div>
<div class="rightSide"></div>
</div>
<div class="container"></div>
<div class="leftSide"></div>
<div class="rightSide"></div>
</div>
</body>
Simplifiquei as coisas, mas este é essencialmente o método. A página inteira altera o layout (ocultando o lado direito em três áreas diferentes) quando o sinalizador é definido no corpo. Isso funciona no Firefox e IE8. Não funciona no IE8 no modo de compatibilidade. O fascinante é que, se você se sentar e atualizar a página, os resultados poderão variar. Ele selecionará o lado direito de uma seção diferente para mostrar. Às vezes, mostrará apenas o lado direito da seção superior, às vezes, mostrará o meio.
Eu tentei:
- um validador (para procurar html malformado)
- verifiquei minha formatação css e ...
- certificando-se de que minha folha de invasão do IE7 não estava afetando.
- colocando a classe flag em um elemento diferente do invólucro que não é do corpo (ainda tem o mesmo comportamento estranho)
Então, minha pergunta é:
- Existe uma maneira de tornar esse comportamento confiável?
- Quando o IE7 decide refazer o estilo?
Obrigado a todos.