IE CSS Bug - 如何保持位置：绝对当页面上的动态JavaScript内容更改 [英] IE CSS Bug - How do I maintain a position:absolute when dynamic javascript content on the page changes

问题描述

我有一个页面，其中有一个列和一个内容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 的内容（因此高度），图像不再排成一行（列不移动）。如果我使用IE开发人员吧只是更新div（说添加位置：绝对手动）图像跳下来，并再次排队。

？

@Ricky - 嗯，这意味着在这种情况下没有解决方案。在最好的情况下，会有一个jaggedy匹配后，但随着我的内容扩大和合同等隐藏/显示不工作是实用的。仍然要感谢您回答最好的解决方案。

解决方案

它是一个在渲染引擎中的错误。我总是碰到它。解决它的一个可能的方法是每当你改变内容时，隐藏和显示div（依次改变高度）：

  var divCol = document.getElementById（'column'）; 
 divCol.style.display ='none'; 
 divCol.style.display ='block';希望这发生得足够快，不会引人注意：）
 
 
I have a page where there is a column and a content div, somewhat like this:
<div id="container">
    <div id="content">blahblahblah</div>
    <div id="column"> </div>
</div>
With some styling I have an image that is split between the column and the content but needs to maintain the same vertical positioning so that it lines up.

Styling is similar to this:
#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;
}
This works great when content in #content is dynamically loaded before rendering.  This also works great in firefox always.  However, in IE6 and IE7 if I use javascript to change the content (and thus height) of #content, the images no longer line up (#column doesn't move). If I use IE Developer Bar to just update the div (say add position:absolute manually) the image jumps down and lines up again.

Is there something I am missing here?

@Ricky - Hmm, that means in this case there is no solution I think.  At its best there will be a jaggedy matchup afterwards but as my content expands and contracts etc. hiding/showing doesn't work out to be practical.  Still thanks for answering with the best solution.
解决方案
Its a bug in the rendering engine. I run into it all the time. One potential way to solve it is to hide and show the div whenever you change the content (that in turn changes the height):
var divCol = document.getElementById('column');
divCol.style.display = 'none';
divCol.style.display = 'block';
Hopefully this happens fast enough that it isn't noticeable :)

                        
这篇关于IE CSS Bug  - 如何保持位置：绝对当页面上的动态JavaScript内容更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！