IE CSS Erro - Como posso manter uma posição absoluta quando a dinâmica de conteúdo javascript na página alterações

Question

Eu tenho uma página onde existe uma coluna e de uma div de conteúdo, algo como isto:

<div id="container">
    <div id="content">blahblahblah</div>
    <div id="column"> </div>
</div>

Com um pouco de eu ter uma imagem que é dividida entre a coluna e o conteúdo, mas precisa manter o mesmo posicionamento vertical de modo a que as linhas de cima.

O estilo é semelhante a este:

#column 
{
    width:150px;
    height:450px;
    left:-150px;
    bottom:-140px;
    background:url(../images/image.png) no-repeat;
    position:absolute;
    z-index:1;
}

#container 
{
   background:transparent url(../images/container.png) no-repeat scroll left bottom;
   position:relative;
   width:100px;
}

Isso funciona muito bem quando o conteúdo em #content é carregada dinamicamente antes da renderização.Isso também funciona muito bem no firefox sempre.No entanto, no IE6 e IE7 e se eu usar javascript para alterar o conteúdo (e, portanto, altura) de #content, as imagens deixam de linha (#column não se move).Se eu usar o IE Developer Barra de apenas atualizar o div (diga adicionar position:absolute manualmente) a imagem salta para baixo e alinhe novamente.

Existe algo que eu estou faltando aqui?

@Ricky - Hmm, o que significa que neste caso não há solução, eu acho.No seu melhor, haverá uma jaggedy matchup depois, mas como o meu conteúdo, se expande e se contrai, etc.ocultando/mostrando não trabalhar fora para ser prático.Ainda assim obrigado por responder com a melhor solução.

Answer 1

Um bug no mecanismo de renderização.Eu executar em ti o tempo todo.Uma potencial forma de resolvê-lo é para ocultar e mostrar o div sempre que você alterar o conteúdo (que por sua vez altera a altura):

var divCol = document.getElementById('column');
divCol.style.display = 'none';
divCol.style.display = 'block';

Espero que isto acontece rápido o suficiente, de que não é perceptível :)

Answer 2

Outra solução que funcionou para mim e não tive nenhum efeito de cintilação foi para adicionar e remover um manequim nome da classe CSS, como esta usando jQuery:

$(element).toggleClass('damn-you-ie')

Answer 3

Se você estiver preocupado sobre a obtenção de uma cintilação de mostrar e esconder divCol você pode justos outra propriedade css e ela terá o mesmo efeito exemplo:

var divCol = document.getElementById('column');
divCol.style.zoom = '1';
divCol.style.zoom = '';