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