Jquery 正在扩展div，但不向下推IE8中的内容

我正在使用下面链接的插件作为一个公文包。单击一个缩略图，它会展开一个div以显示内容，这会向下推它下面的任何缩略图。这在现代浏览器中运行良好，但我必须支持IE8。该插件声称支持它，但在IE8中，最底层的一行缩略图没有被按下

我怀疑这与位置有关：绝对。要向下推底部缩略图，脚本将根据扩展div的高度动态更改每个li上的top:xxx位置。但此位置未正确更改，或者在IE8中未得到遵守

以下是colio插件的源代码：

这似乎是jquery.colio.js代码中的相关部分（我想是吧？）

有人知道这个问题的解决方法吗

---

谢谢大家!

无法很好地测试这一点，但是添加一个模拟位置的空DIV怎么样：绝对位置，但具有常规位置？ 添加一个onresize函数，将“shadowDiv”的大小设置为与“floatingDIV”相同的比例

。。。
...
document.getElementById（'float'）.onresize=function（）{
var shadow=document.getElementById（'shadow'）；
shadow.style.width=this.style.width；
shadow.style.height=this.style.height；
}
...

问题在于，包含所有缩略图的

ul

被赋予一个固定的

高度：440px

，并且当“视图项目”div被创建/扩展时，它被赋予带有页面偏移的

位置：绝对值

即使在现代浏览器中，这也不会将元素向下推，所以我想IE8中会有一些javascript失败。您可以通过以下几种方法解决此问题：


添加一些额外代码以手动调整下部缩略图的位置
使用z索引确保打开的div始终覆盖缩略图
将绝对定位的内容打开到较低的位置或作为某种形式的模式对话框
试着找出IE8和它所使用的浏览器之间的区别
感谢所有迄今为止试图提供帮助的人。虽然我无法解决实际问题，但我通过简单的编辑就可以很好地解决它。我只是在扩展的contentdiv上增加了z-index，这样它就与它未能向下推的缩略图重叠了。我想这算是一个“足够好”的解决方案，但我会让它打开，以防其他人知道如何强制IE8向下推那些底层行
 如果看不到您正在使用的代码，我们将无能为力。对不起，我指的是上面链接的演示。我将直接链接到源代码并编辑我的帖子。感谢您的提醒。在Windows 7虚拟机中，IE10运行IE8渲染模式，我看不到任何问题：当您在第一行的任何缩略图中单击“查看项目”时，是否看到第二行被按下？在我的Windows7IE8测试中，第二行从不向下移动，为扩展的div腾出空间。这是一个有趣的想法。既然绝对位置div是动态创建的，并且实际上不在HTML中，那么我应该把它放在哪里呢？在这种情况下，可以尝试类似floatDiv.outerHTML=''+floatDiv.outerHTML+''的方法。或者只是将div的创建重定向到shadowDiv，而shadowDiv必须在创建之前存在。取决于什么最适合你的问题。谢谢。有没有一种方法可以使模态对话框选项仍然向下推送内容？我需要这部分功能，而不是覆盖内容。手动添加代码可能很困难，因为每行的行数和缩略图都会发生变化，因为网站是响应性的。模式对话框意味着它覆盖了所有内容，就像一个新窗口。所以这不是你想要的。我会在那里抛出一些手动javascript，手动按下较低的
li
元素。这很难看，但我们要处理的是IE，当我不知道扩展div的高度时，有没有办法手动执行？它随着里面的内容而变化，所以我不知道如何手动定位它们。在扩展内容下方结束的li被赋予一类“colio bottom item”。所以我可以试着瞄准那些。这是当前为底部项目设置新顶部位置的行，但在IE8中似乎失败：$（This）.stop（）.animate（{top:item\u top+viewport\u height}，duration，easing）；使用jquery，您可以确定项目内容div的
top
和
height
，将两者加上一些“间距”，然后将该值用作较低
li
sThank you的新
top
。尽管在IE8中没有成功，但这不是“顶部：项目顶部+视口高度”已经在做的事情吗？
     // variables           
    var duration = this.settings.expandDuration, 
        easing = this.settings.expandEasing;

    // get content_id for item to get viewport height to make a gap in item grid
    var content_id = item.data('colio-content-id');
    var viewport_height = this.getViewportHeight(content_id);

    // add any bottom margins to colio viewport height
    viewport_height += parseFloat(this.markup.css('margin-bottom'));

// push items that are below colio viewport down by the amount of viewport height
        $.each(this.insideBottomItems(item), function(){

            // save initial top position
            var item_top = $(this).data('colio-item-top');
            if(item_top === undefined) {
                item_top = parseFloat($(this).css('top')) || 0;
                $(this).data('colio-item-top', item_top);
            }

            // add class to items that we have pushed down
            $(this).addClass('colio-bottom-item');

            // push items using animation
            $(this).stop().animate({top: item_top + viewport_height}, duration, easing);

        });

...
<div id="shadow">
<div style="position:absolute;" id="float"></div>
</div>
...
document.getElementById('float').onresize = function(){
 var shadow = document.getElementById('shadow');
 shadow.style.width = this.style.width;
 shadow.style.height = this.style.height;
}
...