Chrome中真正神祕的DOM問題

忍受着我，這將是非常難以解釋的，我不能真正展示太多的代碼，因爲我不確定我想轉儲所有這將是將要發展的代碼在一個主要的國家網站上使用。我有四個LI標籤，在$（window）.load（）被克隆到DIV中，然後用$ .each（）循環獲取DIV的高度。我遇到的問題是，在各種操作系統的大多數瀏覽器中，高度是一致的，除了Linux和Mac上的Chrome。我會詳細說明一點。Chrome中真正神祕的DOM問題

每個LI包含一些文本和其他一些div，基本上只是一般的內容。我使用$ .contents（）。clone（）來克隆每個LI，並將它放在一個DIV中，其格式不同。這是特定部分的工作原理，不能改變。

OK，jQuery代碼時間：

$(window).load(function() { 

    $('.carousel-thumb').each(function(i) { 
     var $story = $(this).contents().clone(); 

     // Remove all <script> tags before appending, otherwise we're looking 
     // for trouble 
     $('script', $story).remove(); 

     $story.appendTo('#featured-story') 
      .wrapAll('<div class="carousel-story" />'); 
    }); 

    // Fix the sizing on the featured story container 
    $('.carousel-story').each(function(i) { 
     console.log('story ' + i + ' = ' + $(this).height()); 
     if ($(this).height() > storyMaxHeight) 
      storyMaxHeight = $(this).height(); 
    }); 
    /*$('.carousel-story').height(storyMaxHeight); 
    $('#featured-story').height(storyMaxHeight);*/ 
});

我會回答這個可能出現的一個潛在的問題。什麼是刪除腳本標籤？原始的LI標籤包含各種內容，包括內聯腳本。我注意到當我克隆這些內容時，它對頁面結構造成了嚴重破壞。不知道腳本是否再次執行或執行了什麼，但刪除腳本（尤其是因爲它們已經被執行）解決了這個問題。

現在，看看這個有趣的消息。此圖形左側包含Windows Chrome，右側包含Linux Chrome。請注意，Linux/Mac Chrome都行事不端。

Left: Windows Chrome; Right: Linux Chrome

是不是奇怪？在執行腳本期間，Linux的高度完全錯誤。然而，一切都完成後，我手動請求第三個div的高度，它正確地報告高度！然而，左側（正確）的行爲在所有平臺上都是由Windows Chrome和Firefox展示的，甚至包括IE7。

clone（）調用中是否存在一些奇怪的延遲？克隆一堆內容需要花費一些時間，並且jQuery腳本繼續執行，因此抓住了錯誤的高度？有沒有辦法暫停，以確保所有內容已被正確克隆？

謝謝。我真的把頭髮拉過來。

來源

2011-05-20 CaptSaltyJack

你正在做的是正確的，window.load應確保您執行代碼之前所有的圖像加載，有來自亞歷克斯插件或者這樣來處理所有問題。 – kobe 2011-05-20 17:54:30

我砸了StackOverflow嗎？我能得到這個徽章嗎？ ;）我做了一個測試，然後運行height（）函數獲取代碼，這個函數在10ms定時器關閉後被調用。高度是正確的。看起來整個$ .clone（）過程在某些情況下需要一些時間。這幾乎就像在$ .clone（）調用之後需要另一個onDomReady調用一樣。 – CaptSaltyJack 2011-05-20 18:32:50

顯然這是Chrome和Safari中隨機產生的一個錯誤。這些瀏覽器有時會在所有圖像/媒體加載完成之前觸發load（）函數。一個人建議此修復程序/黑客：

jQuery(window).load(function(){ 
    if (jQuery.browser.safari && document.readyState != 'complete'){ 
    // chrome/safari will trigger load function before images are finished 
    // check readystate in safari browser to ensure images are done loading 
    setTimeout(arguments.callee, 100); 
    return; 
    } 
    // do things you want to do 
});

來源：http://javascript.livejournal.com/169501.html

來源

2011-05-20 18:42:41 CaptSaltyJack

Chrome中真正神祕的DOM問題

回答

相關問題