Chrome 中的 outerHeight 给出了错误的值，在 IE 和 FireFox 中可以答案

【问题标题】：outerHeight in Chrome giving wrong value, OK in IE and FireFoxChrome 中的 outerHeight 给出了错误的值，在 IE 和 FireFox 中可以
【发布时间】：2015-04-01 15:55:35
【问题描述】：

在 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 之间区别的小提琴。单击成员，然后单击非成员。您将看到第二组值在每个浏览器中都不同。 http://jsfiddle.net/xjk8m8b1/

EDIT2： 这是另一个小提琴，它显示两个浏览器都获得相同的高度值，直到您尝试计算可见元素。然后 Chrome 就不行了。 http://jsfiddle.net/xjk8m8b1/2/

【问题讨论】：

您应该提供示例以将您的问题复制为 jsFiddle 和所有相关代码/CSS/HTML 标记问题
也许您的问题只是因为您没有等待所有内容完全呈现
我尝试过封装窗口加载事件、页面加载，甚至添加了延迟，但都没有任何区别。
我添加了另一个更简单地显示问题的小提琴。

标签： javascript jquery css google-chrome smart-wizard

【解决方案1】：

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

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

【讨论】：

Chrome 不认为<br> 元素是可见的，即使它会影响流内容。 Chrome, in my opinion is broken: 我倾向于同意

【解决方案2】：

我也有同样的问题，一个ScrollBar在中间，StepContainer从不固定高度。

那我在jquery.smartwizard.js改这行：

$this.elmStepContainer.height(_step($this, selStep).outerHeight());

到这里：

$this.elmStepContainer.height(_step($this, selStep).outerHeight() +20);

20 对我来说已经足够了，我的问题已经解决了。

【讨论】：