为 span 调用 getBoundingClientRect 在 Chromium

Question

我有一个<p>元素，里面有一个空的 span 元素，即<span id="marker"></span>. 当我getBoundingClientRect在 Chromium 中请求时，我得到一个带有<p>元素x,y 坐标的矩形。相反，Firefox 会返回文本内跨度的位置。

我能做些什么来找出跨度在 Chromium 中的位置吗？

显示问题的最小示例：

console.log(document.getElementById("paragraph-0").getBoundingClientRect());

console.log(document.getElementById("span1").getBoundingClientRect());

console.log(document.getElementById("span2").getBoundingClientRect());

<p id="paragraph-0">

  Lorem ipsum dolor sit amet,<span id="span1"></span>consectetur adipiscing elit. Duis tincidunt purus at vulputate suscipit. Pellentesque magna eros, convallis eget hendrerit at, porta vitae mi. Aenean eu nunc a enim egestas venenatis eget eu purus.

  Integer dignissim nibh eget enim tincidunt aliquet. Duis in arcu ornare, imperdiet tortor et, pretium lacus. In lectus risus, rutrum scelerisque blandit et, posuere non ligula. Quisque lectus magna, sodales ac quam a, eleifend tristique sapien. Aenean

  id tempor eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi non lorem eu dolor semper cursus. Vestibulum porta sem nunc, eget euismod mauris scelerisque non. Integer scelerisque sollicitudin rutrum.

  Ut ultricies purus arcu, feugiat ornare lacus varius in. Suspendisse eget risus sed nisi imperdiet ornare in vel urna. Donec eget nunc non mauris tempor malesuada <span id="span2"></span>sed eget lorem.

</p>

如果我在 Firefox 上运行上面的代码，我会得到三个不同的矩形，而在 Chromium 中，它们中的三个将是相同的。

Answer 1

在四处探索之后，正如您在 OP 中所指出的那样，似乎只有在跨度为空且没有边框等情况下才会出现问题。但是，如果 aspan 确实有边框，则它会正确报告其位置。因此，解决此问题的一种简单方法是对跨度应用 0.1 像素的透明边框。const el1 = document.getElementById("paragraph-0").getBoundingClientRect();const el2 = document.getElementById("span1").getBoundingClientRect();const el3 = document.getElementById("span2").getBoundingClientRect();console.log(el1, el2, el3)#span1, #span2{&nbsp; border:0.1px solid transparent;}<p id="paragraph-0">&nbsp; Lorem ipsum dolor sit amet,<span id="span1"></span>consectetur adipiscing elit. Duis tincidunt purus at vulputate suscipit. Pellentesque magna eros, convallis eget hendrerit at, porta vitae mi. Aenean eu nunc a enim egestas venenatis eget eu purus.&nbsp; Integer dignissim nibh eget enim tincidunt aliquet. Duis in arcu ornare, imperdiet tortor et, pretium lacus. In lectus risus, rutrum scelerisque blandit et, posuere non ligula. Quisque lectus magna, sodales ac quam a, eleifend tristique sapien. Aenean&nbsp; id tempor eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi non lorem eu dolor semper cursus. Vestibulum porta sem nunc, eget euismod mauris scelerisque non. Integer scelerisque sollicitudin rutrum.&nbsp; Ut ultricies purus arcu, feugiat ornare lacus varius in. Suspendisse eget risus sed nisi imperdiet ornare in vel urna. Donec eget nunc non mauris tempor malesuada <span id="span2"></span>sed eget lorem.</p>