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

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

Answer 1

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

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

Answer 2

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

然后我在jquery.smartwizard.js中更改此行：

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

对此：

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

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

Chrome中的outerHeight提供错误的值，在IE和FireFox中正常

2 个答案: