我有一个页面，其中有一个列和一个内容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 Hmm，这意味着在这种情况下，我认为没有解决方案。最好的时候会出现锯齿状的对决，但是随着我内容的扩展和收缩等，隐藏/显示并不可行。仍然感谢我们提供最佳解决方案。

解决方案

回答

它是渲染引擎中的错误。我一直都在碰它。解决此问题的一种可能方法是，每当我们更改内容时都会隐藏并显示div(这又会更改高度)：

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

希望这种情况发生的速度足够快，以至于不会引起注意:)

回答

如果我们担心显示和隐藏divCol会产生闪烁，可以调整另一个CSS属性，其效果相同
例如

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

回答

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

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