2

我有一个页面，其中有一个列和一个内容 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 开发人员栏来更新 div（比如手动添加位置：绝对），图像会向下跳并再次排列。

我在这里缺少什么吗？

@Ricky - 嗯，这意味着在这种情况下我认为没有解决方案。在最好的情况下，之后会有一场参差不齐的比赛，但随着我的内容扩展和收缩等，隐藏/显示并不实用。仍然感谢您提供最佳解决方案。

4

3 回答 3

3

它是渲染引擎中的一个错误。我总是遇到它。解决它的一种潜在方法是在更改内容时隐藏和显示 div（这反过来会更改高度）：

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

希望这发生得足够快，以至于不明显:)

于 2008-08-29T02:30:41.463 回答
1

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

$(element).toggleClass('damn-you-ie')
于 2010-11-21T08:33:27.677 回答
0

如果您担心显示和隐藏 divCol 会闪烁，您可以调整另一个 css 属性，它会产生相同的效果，例如

var divCol = document.getElementById('column');
divCol.style.zoom = '1';
divCol.style.zoom = '';
于 2010-01-15T16:40:36.377 回答