CODEWITHSUNDEEP
javascriptinternet-explorergetcomputedstyle
Geuis
Geuis

Reputation: 42297

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

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?

Upvotes: 12

Views: 3717

Answers (3)

Jason Frank
Jason Frank

Reputation: 3902

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.

Upvotes: 7

WebBrother
WebBrother

Reputation: 1567

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

  1. 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

Upvotes: 0

Charlie L
Charlie L

Reputation: 463

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.

Upvotes: 1

Related Questions