Javascript 调用范围的getBoundingClientRect在Chromium上返回错误的位置，但在Firefox上有效

我有一个元素，里面有一个空的span元素，即。当我要求使用Chromium获取getBoundingClientRect时，我得到一个带有元素x，y坐标的矩形。相反，Firefox返回文本中跨度的位置

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

一个简单的例子来说明这个问题：

console.logdocument.getElementByIdparagraph-0.getBoundingClientRect； console.logdocument.getElementByIdspan1.getBoundingClientRect； console.logdocument.getElementByIdspan2.getBoundingClientRect；

Lorem ipsum dolor sit amet，是一位杰出的献身者。杜伊斯·廷西蒙特·普鲁斯在瓦努普塔特·苏西比特。佩伦茨克大厄洛斯，亨德雷特会议，生活之门。欧洲联盟的成员国是威尼斯人。 整型尊严尼布·埃吉特·伊尼姆·廷西德·阿利奎特。在阿尔库奥纳雷、奥托尔等地的酒后驾车。在《莱克托斯·里索斯》中，芸香、权杖、布朗迪特、波苏尔、非利古拉。大讲坛，苏打水，智者。埃尼安 我是临时爱神。虎口浮雕和肘部浮雕同侧前庭；莫比非洛雷姆欧盟多洛·森佩尔·库苏斯。门廊门，eget euismod mauris scelerisque non。整型十字花环。 但是，在我们的生活中，我们的生活是一片混乱。在乌尔纳的食物中，食物中的营养素是最重要的。非毛里斯人的临时工作人员必须遵守法律。

---

如您在OP中所注意到的，经过一番探索后，似乎只有当跨度为空且没有边框等情况下才会出现问题

但是，如果跨距确实有边框，则会正确报告其位置。因此，一个简单的解决方法是在跨度上应用0.1px的透明边框

const el1=document.getElementByIdparagraph-0.getBoundingClientRect； const el2=document.getElementByIdspan1.getBoundingClientRect； const el3=document.getElementByIdspan2.getBoundingClientRect； 控制台。logel1、el2、el3 span1，span2{ 边框：0.1px实心透明； }

Lorem ipsum dolor sit amet，是一位杰出的献身者。杜伊斯·廷西蒙特·普鲁斯在瓦努普塔特·苏西比特。佩伦茨克大厄洛斯，亨德雷特会议，生活之门。欧洲联盟的成员国是威尼斯人。 整型尊严尼布·埃吉特·伊尼姆·廷西德·阿利奎特。在阿尔库奥纳雷、奥托尔等地的酒后驾车。在《莱克托斯·里索斯》中，芸香、权杖、布朗迪特、波苏尔、非利古拉。大讲坛，苏打水，智者。埃尼安 我是临时爱神。虎口浮雕和肘部浮雕同侧前庭；莫比非洛雷姆欧盟多洛·森佩尔·库苏斯。门廊门，eget euismod mauris scelerisque non。整型十字花环。 但是，在我们的生活中，我们的生活是一片混乱。在乌尔纳的食物中，食物中的营养素是最重要的。非毛里斯人的临时工作人员必须遵守法律。

---

经过进一步的测试，我发现这种情况只会发生在空跨度的情况下。一个可能的肮脏！修复方法是将某种不可见的unicode字符（例如，&x2063）放入范围内。但是，如果有人有比这更好的答案，我仍然很感兴趣。在我看来，这似乎是正确的：我不熟悉codepen.io浏览器背后的细节，但这似乎是一个特定于铬的问题。我使用的是chromium 77，所描述的行为表明它之所以有效，是因为我添加了一个边框-这给了我解决问题的想法：-在基于chromium的Microsoft Edge 79.0.279.0正式构建开发人员64位版本上工作。跨距的宽度为0，因为它们没有内容，但其他方面都很好…谢谢！与依赖unicode不可见字符相比，这看起来没有那么粗糙