我正在使用下面链接的插件作为产品组合。单击缩略图,它会展开一个div以显示内容,并向下拖动其下方的所有缩略图。这在现代浏览器中可以正常工作,但我必须支持IE8。该插件声称支持它,但是在IE8中,缩略图的最下面一行没有被按下。

http://plugins.gravitysign.com/colio/index_black.html

我怀疑这与立场有关:绝对。要向下推底部缩略图,脚本会根据扩展的div的高度动态更改每个li的top:xxx位置。但是,此职位没有得到适当的更改或在IE8中没有得到兑现。

这是colio插件的源代码:http://plugins.gravitysign.com/colio/js/jquery.colio.js

这似乎是jquery.colio.js代码中的相关部分(我认为?):

     // 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:绝对一个,但具有常规位置呢?
添加一个onresize函数,它将“ shadowDiv”的大小设置为与“ floatingDIV”相同的比例吗?

...
<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;
}
...

10-06 08:09