9

I just discovered and really like getBoundingClientRect because it includes sub-pixel precision. This has allowed me to create consistent alignment, even if the user types Ctrl+ or Ctrl+-.

It has properties top, bottom, left, right, & width & height.

It is simple to find the browser support on the internet, but not so much for the the width and height properties in particular. It appears that this was added after the fact. It works in Firefox, Chrome, and IE10, but what about IE8 & IE9? I can't test these conveniently.

700 Software
  • 85,281
  • 83
  • 234
  • 341
  • Can you use the developer stuff in IE10 to put it in IE8 mode? (I'm not sure IE10 can do that, but IE9 in IE8 mode would probably get something like that right.) – Pointy Jul 16 '13 at 19:44
  • Also is `width` different from `right - left`? – Pointy Jul 16 '13 at 19:45
  • *"use the developer stuff"* Historically the F12 tools in IE have been able to accurately reflect older HTML and CSS parsers, but I have noticed it doesn't work accurately on the old JavaScript interpreters. – 700 Software Jul 16 '13 at 19:47
  • *"is `width` different from `right-left`"* No, based on my limited testing. I still like using `width` because it is shorter and simpler than `right-left`. – 700 Software Jul 16 '13 at 19:48
  • i doubt width and height made it in, unless IE was breaking the rules first and everyone copied, like .innerText for example... – dandavis Jul 16 '13 at 20:16
  • @dandavis, It works in the latest Firefox, Chrome, and IE10. – 700 Software Jul 16 '13 at 20:20
  • see this: https://caniuse.com/#feat=getboundingclientrect – Ali Hesari Dec 13 '18 at 08:48

1 Answers1

10

In IE9 as IE8:

document.body.getBoundingClientRect() 
[object] {
    right : 2556,
    top : 0,
    bottom : 1195,
    left : 0
}

In IE9 as IE9:

document.body.getBoundingClientRect() 
[object ClientRect] {
    bottom : 1435,
    height : 1435,
    left : 0,
    right : 2544,
    top : 0,
    width : 2544
}

So, I'd say yes on IE9, no on IE8...

kangax
  • 38,898
  • 13
  • 99
  • 135
dandavis
  • 16,370
  • 5
  • 40
  • 36
  • 2
    IE 7 also does not support width and height. Thanks Microsoft for the janky programming experience! – Phil Jan 30 '14 at 22:00
  • 1
    We discovered that right-left in IE8 is performed as integer math, whereas width in IE9 can be floating point. Half a pixel can be considerable if you are trying to line up two elements on a page. – Mike Preston May 22 '15 at 15:33