2010-05-10 52 views
7

Firefox和Chrome中出現此問題,但Safari很好。然而,IE8,在兼容性模式下,不會加載覆蓋頂部(它只是坐在頂部,滾動內容 - 儘管我猜這是因爲覆蓋是在標記的頂部)。IE8中的彩盒投擲抖動

它也不會顯示我試圖顯示的圖像,但會將疊加加載圖像縮小爲屏幕左上角的任何內容。我正在使用標準的colorbox-min和隨之而來的CSS。

檢查IE8開發工具中的標記似乎暗示內容實際上並未加載到cboxLoadedContent div中。

$(document).ready(function() { 
    $('a[rel="preview"]').colorbox(
     { 
      photo: true 
      , maxWidth: '95%' 
      , maxHeight: '95%' 
      , photoScaling: true 
     } 
    ); 
}); 

基本頁面是媒體形象的列表,當你點擊一個它可以讓你預覽,並允許您通過那些 在頁面上滾動以及至少它在FF花了一些截圖,因爲它正在收縮覆蓋東西http://dumpt.com/img/viewer.php?file=7s2zwoxozzf7666h0fzc.png

任何有什麼想法?

我希望我的解釋不是很好,所以如果需要的話,也許我可以拍一部電影或其他東西。

+5

+1爲標題單獨 – 2010-05-10 12:03:50

+0

+1出於同樣的原因。 Thankyou – 2010-08-05 09:12:42

+0

您的網頁是否有任何驗證錯誤?這可以在某些瀏覽器中關閉colorbox。如果您通過http://validator.w3.org查看您的HTML,任何明顯的問題都會被標記出來? – 2010-08-18 10:26:03

回答

1

你的代碼包裝在一個準備好的功能?我見過在FF/Safari中工作的代碼在IE中失敗的例子,因爲IE似乎更慢地加載DOM。在這些情況下,幾乎總是發現我沒有將代碼包裝在一個準備就緒的函數中。

$(function() { // the important bit 
    $('.colorbox').load('...').colorbox(); 
}); 
+0

嗨,感謝您的回覆... 不要惋惜它準備好了 $(document).ready(function(){ \t $('a [rel =「preview」]')。colorbox({ true,maxWidth:'95%',maxHeight:'95%',photoScaling:true}); }); 基本上這個頁面是一個媒體圖像列表..當你點擊一個它會給你預覽,並允許你滾動瀏覽頁面上的內容..當它在FF 做了一個截圖,因爲它正在縮小overlay thingy http://www.dumpt.com/img/viewer.php?file=7s2zwoxozzf7666h0fzc.png 因此,它變得越來越小,然後就是這麼做 – nat 2010-05-10 11:59:33

+0

@nat - 也許它並沒有等待圖像加載和計算大小錯誤在IE瀏覽器?嘗試一些簡單的方法,比如延遲一分鐘的設置(讓圖像有機會加載)。 '$('a ...')。delay(60000)...'或setTimeout(function(){$('a ...')},600000);'如果這樣的話,那麼你可能需要調整您的代碼以檢測圖像何時加載或使用具有最小尺寸的容器。 – tvanfosson 2010-05-10 12:24:27

+0

@nat s/600000/60000/g – tvanfosson 2010-05-10 12:57:23

1

嘗試使用XHTML strict doctype ...?

+0

即使是一個過渡人爲我修復了一個非常類似的問題,謝謝。 – Michielvv 2011-11-21 19:42:02

0

我經歷了完全相同的症狀 - 但在我的情況下,它擴展到所有瀏覽器。

一個原因是我沒有包含用於使用colorbox的頁面的CSS文件。

另一個原因是我更新到最新版本的jQuery,但沒有升級colorbox。 (另外,如果你更新了jquery包含,請確保你也更新了jquery vs doc - 如果你甚至使用它)。

希望有所幫助。

0

搜索通過你的顏色框文件這樣的:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader 

將有它的幾個實例,每個實例指向一個PNG。確保該png的路徑正確,然後再次測試。

我很確定我在一個點上有這個確切的問題,修復路徑是我需要做的。但是,這是一段時間,所以我的記憶有點模糊。

0

我有同樣的問題。由於IE不喜歡將CSS max-width設置爲100%,因此我的圖像只有10px寬。爲了緩解這個問題,我將以下內容添加到我的CSS中。

.cboxIE img 
    { 
     max-width:none; 
     _max-width:none; 
    }