【问题标题】:getBoundingClientRect incorrect on a range element in Windows / IE11Windows / IE11 中的范围元素上的 getBoundingClientRect 不正确
【发布时间】:2016-01-18 20:27:34
【问题描述】:

在 IE11 中使用范围对象 getBoundingClientRect 时,它会报告错误的数字。它报告高度为 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>

这是一个截图供参考:

【问题讨论】:

  • 你可以尝试定义一个字体系列,然后再试一次。还要确保浏览器缩放为 100%。

标签: javascript internet-explorer-11 getboundingclientrect


【解决方案1】:

编辑:

对我来说,Win 7 64bit IE11.0.9600,运行你的 sn-p 控制台说:

[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 }

【讨论】:

  • 我很生气,当我发布这个时,我得到的数字与我现在在同一个 Windows 虚拟环境中得到的数字大不相同。我不确定发生了什么变化,但我现在看到的和你看到的一样。
猜你喜欢
  • 1970-01-01
  • 2013-11-01
  • 2015-03-09
  • 1970-01-01
  • 2015-02-17
  • 2014-04-20
  • 2018-10-01
  • 2013-08-11
  • 2017-07-21
相关资源
最近更新 更多