getComputedStyle reporting different heights between Chrome/Safari/Firefox and IE11

Question

This has been driving me a little batty all day and I haven't been able to find where anyone else has documented this discrepancy.

window.getComputedStyle(el).height

See http://jsfiddle.net/ZwF9H/6/ for the demo.

What I am expecting is that window.getComputedStyle() should return the same computed height value between all browsers. Internet Explorer 11 is doing something different. (Actually, IE 9 and 10 are as well, but IE 11 was the first one I could get the dev tools to work in.)

For all other browsers, the computed height is the height set in the css whether it be in the stylesheet or inline on the textarea element.

IE11 is ignoring the box-sizing: border-box declaration and subtracts the padding and margin, which I think is incorrect.

Is this a bug, am I doing something wrong, is it a know fact that IE11 returns computed values differently?

Answer 1

I had the same problem with IE11, where it was ignoring the box-sizing: border-box; and thus it was subtracting padding from the border-box height, giving me smaller height values than Chrome reported.

I found that getBoundingClientRect().height did report the proper height (properly observing box-sizing: border-box;) in IE11 and Chrome. So that has solved the problem for me.

Answer 2

Element.height specifies the height within the content area, not including the padding or border. There's more information about it here (https://developer.mozilla.org/en-US/docs/Web/CSS/height).

I'd suggest using jQuery's $el.outerHeight() if you have that option available.