5

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

更具体地说，包含在具有 line-height 值的 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);

看来IE在计算范围的DOMRect时没有考虑行高属性值

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

有没有人见过这个问题，有没有办法让 IE 返回正确的边界客户端矩形？

4

0 回答 0