Chrome中真的很神秘的DOM问题

Question

请耐心等待，这将是非常难以解释的，我无法真正展示太多代码，因为我不确定是否要转储所有这些将在主要国家网站上使用的开发代码站点。

我有四个LI标签，在$（window）.load（）之后被克隆到DIV中，然后使用$ .each（）循环获取DIV的高度。我遇到的问题是，在各种操作系统的大多数浏览器中，除了Linux和Mac上的Chrome之外，其高度是一致的。我会详细说明一下。

每个LI包含一些文本和一些其他div，基本上只是一般内容。我正在使用$ .contents（）。clone（）来克隆每个LI并将它放在DIV中，它的样式不同。这就是特定部分的工作方式，它无法改变。

好的，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都行为不端。

这不奇怪吗？在执行脚本期间，Linux中的高度完全错误。然而，在完成所有操作并且我手动请求第三个div的高度后，它会正确报告高度！然而，左侧的行为（正确）在所有平台上都是由Windows Chrome和Firefox展示的，甚至是IE7。

clone（）调用中有一些奇怪的延迟吗？克隆一堆内容需要一些时间，并且jQuery脚本继续执行并因此抓住了错误的高度？有没有办法暂停，以确保所有内容都已正确克隆？

感谢。我真的把头发拉过这个。

Answer 1

显然，这是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