outerHeight() differs between chrome and IE11

[nick1377]

Description

The outerHeight() differs between Chrome and IE11.
In the test case below the height shows as 23 in chrome but 25 in IE11.

Link to test case

https://jsfiddle.net/179d0uek/12/

[timmywil]

Thanks for opening an issue. But, the result is correct because you have a border on both the outer div and inner div, so it's really 10 + 2 + 2 = 14.

[nick1377]

Can you reopen this issue? The test case was bad and I had the issue slightly wrong but it is a bug. I provided a better test case and fixed the title and description a bit.

[dmethvin]

Please work the test case down to a minimum, removing css and HTML elements/attributes that don't affect the result.

[nick1377]

Done. The new test case is now only what is needed to reproduce the issue.

[mgol]

Thanks for the updated test case. I confirm the behavior in IE changed in jQuery 3.2.0.

[dmethvin]

Here's what I see in the IE11 inspector:

Notice the offset 2, I assume that's coming from the default stylesheet and if you add cellpadding=0 cellspacing=0 to the <table> it goes away. There's no guarantee that all browsers will have the same default stylesheet and even if they did it's possible the measurements might be different due to things like font substitution.

[mgol]

@dmethvin The biggest issue is that behavior in IE changed in jQuery 3.2.0 so it looks like an unintended breaking change.

[gibson042]

The problem seems to hinge on phantom <tr> borders in IE: https://jsfiddle.net/179d0uek/15/ . Now to investigate the reason...