Methods for element width / height

Question

Question: Is there a scenario in which getBoundingClientRectthey window.getComputedStylewill differ in widthor height?

I just found inconsistent width(see below) in IE when an element has box-sizingwhere it window.getComputedStylereturns the wrong value.

So, I thought about overriding only widthand heightwith values getBoundingClientRect, but not sure whether there are cases where this did not happen.

Example problem (in IE): http://jsfiddle.net/bwPM8/

var box = document.querySelector('.box');
var gBCR_width = box.getBoundingClientRect().width; // always 200
var wGCS = window.getComputedStyle(box).width; // 200 some browsers, 160 in IE

Answer 1

In IE, CSS padding: 10px;causes an overflow and gives an extra size computedStyle ..

IE Borders .

40px

overflow:hidden; box-sizing: border-box;, , , 200px - 40px = 160px.

: , overflow:hidden, , box-sizing:border-box , .

fiddle 1 ( ),

'computedValue: 180px'

Border:0px fiddle 2 .

, , , IE ( IE , )

Answer 2

, .

getBoundingClientRect() , ( , getClientRects() , .. CSS, ). , getComputedStyle(), CSS CSS.

.

, transform , , getBoundingClientRect():

http://jsfiddle.net/epW3c/

, , .

IE, , Internet Explorer, - . , quirks, doctype .