IE CSS Bug - 当页面上的动态 javascript 内容更改时如何保持位置:绝对
-
09-06-2019 - |
题
我有一个页面,其中有一个列和一个内容 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 - 嗯,这意味着在这种情况下我认为没有解决方案。最好的情况是,之后会有一场锯齿状的对决,但随着我的内容的扩展和收缩等。隐藏/显示并不实用。仍然感谢您以最佳解决方案回答。
解决方案
这是渲染引擎中的一个错误。我总是遇到它。解决此问题的一种可能方法是每当更改内容时隐藏和显示 div(进而更改高度):
var divCol = document.getElementById('column');
divCol.style.display = 'none';
divCol.style.display = 'block';
希望这种情况发生得足够快以至于不会被注意到:)
其他提示
另一个对我有用并且没有闪烁效果的解决方法是添加和删除虚拟 CSS 类名,就像使用 jQuery 一样:
$(element).toggleClass('damn-you-ie')
如果您担心从显示和隐藏Divcol的闪烁中
var divCol = document.getElementById('column');
divCol.style.zoom = '1';
divCol.style.zoom = '';
不隶属于 StackOverflow