我正在使用下面链接的插件作为作品集。您单击一个缩略图,它会展开一个 div 以显示内容,这会将其下方的任何缩略图下推。这在现代浏览器中工作正常,但我必须支持 IE8。该插件声称支持它,但在 IE8 中,缩略图的底部行没有被下推。
http://plugins.gravitysign.com/colio/index_black.html
我怀疑它与position:absolute有关。为了将底部缩略图向下推,脚本会根据展开的 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);
});
有人知道这个问题的解决方法吗?
谢谢!
最佳答案
不能很好地对此进行测试,但是添加一个模拟 position:absolute 的空 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;
}
...
关于jquery - 在 IE8 中扩展 div 不向下推内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21611247/