擴展div不會降低IE8中的內容

Question

我正在使用下面鏈接的插件作為產品組合。 單擊縮略圖，它會展開一個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);

        });

有誰知道解決此問題的方法？

謝謝！

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並且當“視圖項目” div被創建/擴展時，其position: absolute被賦予position: absolute具有頁面偏移量的position: absolute 。

即使在現代瀏覽器中，這也不會降低元素的負擔，因此我認為IE8會出現一些JavaScript失敗。 您可以通過以下幾種方法解決此問題：

• 添加一些額外的代碼來手動調整下部縮略圖的位置。
• 使用z-index以確保打開的div始終覆蓋縮略圖
• 打開絕對位置較低的內容或以某種形式的模式對話框
• 嘗試找出IE8和可在其中使用的瀏覽器之間的差異

Answer 3

到目前為止，感謝所有嘗試提供幫助的人。 盡管我無法解決實際的問題，但是我可以通過簡單的編輯將其修復得足夠好。 我只是在擴展的內容div上將z-index設置得更高，以使其與無法下推的縮略圖重疊。 我認為這算是一個“足夠好”的解決方案，但是如果其他任何人都知道如何迫使IE8壓低這些底部的行，我將其保持打開狀態。