Question

我使用下面链接的插件作为投资组合。您单击缩略图并展开div以显示内容，从而将其下方的任何缩略图向下推。这在现代浏览器中工作正常，但我必须支持IE8。该插件声称支持它，但在IE8中，底部的缩略图行没有被推下。

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

我怀疑它与位置有关：绝对。要向下推动底部缩略图，脚本会根据展开的div的高度动态更改每个li上的顶部：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);

        });

是否有人知道此问题的解决方法？

谢谢！

Answer 1

不能很好地测试这个，但是添加一个模仿位置的空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;
}
...

Answer 2

问题在于，包含所有缩略图的ul被赋予固定的height: 440px，并且当＆＃34;视图项目＆＃34; div被创建/扩展，它被赋予position: absolute页面偏移。

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

添加一些额外的代码以手动调整下方缩略图的位置。
使用z-index确保打开的div始终覆盖缩略图
打开绝对定位的内容或作为某种形式的模态对话框
尝试找出IE8与

Answer 3

感谢所有试图提供帮助的人。虽然我无法解决实际问题，但我能够通过简单的编辑来解决它。我只是在扩展内容div上使z-index更高，以便它与未能按下的缩略图重叠。我认为这算是一个“足够好”的解决方案，但是如果其他人知道如何强制IE8推倒那些底行，我会保持开放状态。

扩展div而不是推低IE8中的内容

3 个答案: