Windows/IE11 中范围元素的 getBoundingClientRect 不正确
getBoundingClientRect incorrect on a range element in Windows / IE11
在 IE11 中使用范围对象获取 BoundingClientRect 时报告错误数字。它报告高度为 128,而实际高度为 74。它报告顶部偏移为 8,而实际顶部偏移为 35。
这是已知错误吗?有没有办法在 windows ie11.
中获得选择的准确数字
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>
这里有截图供参考:
编辑:
对我来说,Win 7 64 位 IE11.0.9600,运行 你的代码片段控制台显示:
[object ClientRect]{bottom: 72, constructor: ClientRect {...}, height: 64, left: 8, right: 47.090000152...", top: 8, width: 39.090000152..."}
大致匹配 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 }
在 IE11 中使用范围对象获取 BoundingClientRect 时报告错误数字。它报告高度为 128,而实际高度为 74。它报告顶部偏移为 8,而实际顶部偏移为 35。
这是已知错误吗?有没有办法在 windows ie11.
中获得选择的准确数字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>
这里有截图供参考:
编辑:
对我来说,Win 7 64 位 IE11.0.9600,运行 你的代码片段控制台显示:
[object ClientRect]{bottom: 72, constructor: ClientRect {...}, height: 64, left: 8, right: 47.090000152...", top: 8, width: 39.090000152..."}
大致匹配 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 }