IE的CSS错误 - 我如何保持一个姿势：绝对当页面的动态JavaScript内容的变化

我有一个页面，有一栏和内容DIV，有点像这样：IE的CSS错误 - 我如何保持一个姿势：绝对当页面的动态JavaScript内容的变化

<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 - 嗯，这意味着在这种情况下，我认为没有解决方案。在最好的情况下，之后会出现一个糟糕的对决，但是随着我的内容扩展和合同等，隐藏/显示并不适用于实际。仍然感谢您回答最好的解决方案。

来源

2008-08-29 Matt Mitchell

它是渲染引擎中的一个错误。我一直遇到它。解决这个问题的一个可能的方法是隐藏和显示DIV每当变更内容（这反过来改变高度）：

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

希望这种情况发生足够快，这不是明显的:)

来源

2008-08-29 02:30:41 Ricky

如果你担心显示和隐藏divCol闪烁，你可以调整另一个css属性，它会有同样的效果 eg

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

来源

2010-01-15 16:40:36 tedL

这工作对我来说并没有闪烁效果添加和删除使用虚拟CSS类名，这样的jQuery的另一个解决方法：

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

来源

2010-11-21 08:33:27

IE的CSS错误 - 我如何保持一个姿势：绝对当页面的动态JavaScript内容的变化

回答

相关问题