我有一个页面,其中有一个列和一个内容 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';
希望这种情况发生得足够快以至于不会被注意到:)
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)