2

在 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/

4

2 回答 2

2

While not the best solution, I did figure out the issue. Firefox and IE are both adding up the height of everything in the div, include break tags and anything that creates vertical space. Chrome, in my opinion is broken, and not adding up these extra elements! It is not returning a true value for consumed vertical space.

My workaround is to wrap the contents of the div inside another dummy div. This way jquery looks at the height of that first child div and correctly returns the height.

于 2015-02-02T21:58:41.250 回答
0

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

然后我将这一行更改为jquery.smartwizard.js：

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

对此：

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

20对我来说就足够了，我的问题就消失了。

于 2020-11-17T21:42:18.257 回答