IE CSS Bug - 当页面上的动态 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 Developer Bar 来更新 div（例如手动添加位置：绝对），图像会向下跳并再次对齐。

我在这里缺少什么吗？

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

Answer 1

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

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

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

Answer 2

另一个对我有用并且没有闪烁效果的解决方法是添加和删除虚拟 CSS 类名，就像使用 jQuery 一样：

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

Answer 3

如果您担心从显示和隐藏Divcol的闪烁中

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