IE CSS Erro - Como posso manter uma posição absoluta quando a dinâmica de conteúdo javascript na página alterações
-
09-06-2019 - |
Pergunta
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.
Solução
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 :)
Outras dicas
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')
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 = '';