outerHeight in Chrome giving wrong value, OK in IE and FireFox

问题

In the jquery.smartWizard plugin, there is a function called fixHeight which adjusts the height of a wizard step. This is used when a step is first displayed or when revealing hidden divs within the step. It works fine in IE (at least in IE 11 on Win8.1) and in FireFox. But, in the latest version of Chrome (Version 40.0.2214.94 m) the outerHeight is a much smaller value than it should be, by over 100 pixels or more.

This is the function, out of the box:

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);

}

I modify the final steps to add the animation. With or without Chrome fails.

EDIT: Here is a fiddle that demonstrates the difference between IE and Chrome. Click member, then click non-member. You will see that second set of values is different in each browser. http://jsfiddle.net/xjk8m8b1/

EDIT2: Here is another fiddle that shows both browsers get the same values for height until you try and calculate the visible elements. Then Chrome is way off. http://jsfiddle.net/xjk8m8b1/2/

回答1:

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.

回答2:

I have the same problem, a ScrollBar is in the middle, the StepContainer never fixes the height.

Then I change this line in jquery.smartwizard.js:

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

To this:

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

20 is enough for me, and my problem is gone.

来源：https://stackoverflow.com/questions/28282221/outerheight-in-chrome-giving-wrong-value-ok-in-ie-and-firefox