css - IE CSS Bug - 如何保持位置 :absolute when dynamic javascript content on the page changes

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 Developer Bar 来更新 div(例如手动添加position:absolute)，图像会向下跳并再次对齐。

我在这里缺少什么吗？

@Ricky - 嗯，这意味着在这种情况下我认为没有解决方案。最好的情况是，之后会有一场锯齿状的对决，但随着我的内容扩展和收缩等，隐藏/显示并不实用。仍然感谢您以最佳解决方案回答。

Answer 1

这是渲染引擎中的一个错误。我总是遇到它。解决此问题的一种可能方法是，每当您更改内容(进而更改高度)时隐藏和显示 div:

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

希望这种情况发生得足够快，以至于不会被注意到:)