IE的CSS錯誤 - 我如何保持一個姿勢：絕對當頁面的動態JavaScript內容的變化

Question

我有一個頁面，有一欄和內容DIV，有點像這樣：

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

隨着一些樣式我有一個圖像被分割列和內容，但需要保持相同的垂直定位，以便它排隊。

造型與此類似：

#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; 
} 

這個偉大的工程時#content內容呈現之前動態加載。這也一直在Firefox中很好用。但是，在IE6和IE7中，如果使用javascript更改#content的內容（因此高度），則圖像不再排隊（#column不會移動）。如果我使用IE開發工具欄來更新div（例如添加位置：絕對手動），則圖像跳轉並重新排列。

有什麼我在這裏失蹤？

@Ricky - 嗯，這意味着在這種情況下，我認爲沒有解決方案。在最好的情況下，之後會出現一個糟糕的對決，但是隨着我的內容擴展和合同等，隱藏/顯示並不適用於實際。仍然感謝您回答最好的解決方案。

Answer 1

它是渲染引擎中的一個錯誤。我一直遇到它。解決這個問題的一個可能的方法是隱藏和顯示DIV每當變更內容（這反過來改變高度）：

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

希望這種情況發生足夠快，這不是明顯的:)

Answer 2

如果你擔心顯示和隱藏divCol閃爍，你可以調整另一個css屬性，它會有同樣的效果 eg

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

Answer 3

這工作對我來說並沒有閃爍效果添加和刪除使用虛擬CSS類名，這樣的jQuery的另一個解決方法：

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