javascript - 在 Chrome 中，outerHeight 给出了错误的值，在 IE 和 FireFox 中则正常

Question

在jquery.smartWizard插件中，有一个名为fixHeight的函数，它可以调整向导步骤的高度。当首次显示步骤或显示步骤中隐藏的 div 时使用此功能。它在 IE(至少在 Win8.1 上的 IE 11 中)和 FireFox 中运行良好。但是，在最新版本的 Chrome(版本 40.0.2214.94 m)中，outerHeight 的值比应有的小得多，超过 100 像素或更多。

这是开箱即用的功能:

SmartWizard.prototype.fixHeight = function(){
    var height = 0;

    var selStep = this.steps.eq(this.curStepIdx);
    var stepContainer = _step(this, selStep);
    stepContainer.children().each(function() {
        if($(this).is(':visible')) {
             height += $(this).outerHeight(true);
        }
    });

    // These values (5 and 20) are experimentally chosen.
    //stepContainer.height(height);
    //this.elmStepContainer.height(height + 12);

    stepContainer.animate({ "height": height - 12 }, 500);
    this.elmStepContainer.animate({ "height": height }, 500);
    alert(window.outerHeight);

}

我修改了添加动画的最后步骤。无论有或没有 Chrome 都会失败。

编辑: 这是一个演示 IE 和 Chrome 之间差异的 fiddle 。单击“成员(member)”，然后单击“非成员(member)”。您将看到第二组值在每个浏览器中都不同。 http://jsfiddle.net/xjk8m8b1/

编辑2: 这是另一个 fiddle ，显示两个浏览器获得相同的高度值，直到您尝试计算可见元素。那么 Chrome 就已经落后了。 http://jsfiddle.net/xjk8m8b1/2/

Answer 1

虽然不是最好的解决方案，但我确实解决了这个问题。 Firefox 和 IE 都会将 div 中所有内容的高度相加，包括分隔标记和创建垂直空间的任何内容。在我看来，Chrome 已经被破坏了，并且没有添加这些额外的元素!它没有返回消耗的垂直空间的真实值。

我的解决方法是将 div 的内容包装在另一个虚拟 div 中。这样 jquery 就会查看第一个子 div 的高度并正确返回高度。