Internet Explorer 11中的范围getBoundingClientRect()顶部不正确

Question

我正在使用Range对象和Element.getBoundingClientRect()来计算某些文本的位置.我在Chrome和Firefox中获得了预期的结果,但在IE中,顶级属性值是错误的.

更具体地说,包含在具有行高度值的span元素中的文本.这个粗俗的小提琴说明了问题https://jsfiddle.net/eekr4qhs/

示例HTML

<div style="display:inline-block; width:100px;height:500px; background-  color:red">
    <span id="span1" style="line-height:500px">
        text
    </span>
</div>

代码段

var spanEl = document.getElementById("span1");
var textNode = spanEl.childNodes[0]; 
var offsetStart = 0;
var offsetEnd = textNode.nodeValue.length || 0;

var range = document.createRange();
range.setStart(textNode, offsetStart);
range.setEnd(textNode, offsetEnd);

var rect = range.getBoundingClientRect();
console.log(rect.top);

在计算范围的DOMRect时,IE似乎没有考虑行高属性值

如果我在Chrome中打开小提琴,我会得到249.09722900390625作为rect的顶部,而在IE 11中,top是8

有没有人以前见过这个问题,并且有一些方法让IE返回正确的边界客户端矩形？