GetBoundingClientRect invalid for range element in Windows / IE11

When using the range object for getBoundingClientRect in IE11, it reports incorrect numbers. It reports that the height is 128 and the actual height is 74. It reports the top offset as 8, and the actual top offset is 35.

Is this a known bug? Is there a way to get the exact numbers to select in ie11 windows.

var div = document.querySelectorAll('div')[0]; var t = div.childNodes[0]; var range = document.createRange(); range.setStart(t, 0) range.setEnd(t, 1) console.log(range.getBoundingClientRect()) 
 div.text { font-size: 64px; line-height: 1em; } 
 <div class="text">T</div> 

Here is a screenshot for reference:

enter image description here

+6
source share
1 answer

EDIT:

For me, Win 7 64bit IE11.0.9600, running your fragment, the console says:

 [object ClientRect]{bottom: 72, constructor: ClientRect {...}, height: 64, left: 8, right: 47.090000152...", top: 8, width: 39.090000152..."} 

Which roughly corresponds to the values โ€‹โ€‹of FF 47.0.1:

 DOMRect { x: 8, y: 3.3333282470703125, width: 38.5, height: 73.33334350585938, top: 3.3333282470703125, right: 46.5, bottom: 76.66667175292969, left: 8 } 
+2
source

All Articles