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?

Gap

Did you get some more info about this problem and how to get around it? – Rachael

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.

Bathysphere

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.

Gardal

Answer 3

Use polyfill

There are two polyfills which fixes this bug:

1. jonathantneal / Polyfills-for-IE8

https://github.com/jonathantneal/Polyfills-for-IE8/blob/master/getComputedStyle.js

2. jonathantneal / polyfill

https://github.com/jonathantneal/polyfill/blob/master/polyfills/getComputedStyle/polyfill.js

It looks like it fixes the problem.

Demo with 1st polyfill

//SO says that I must add code here, but it's too long

Demo with 2nd polyfill

//look at demo

Cuttler