1 回答

TA貢獻1946條經驗 獲得超3個贊
在四處探索之后,正如您在 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{
border:0.1px solid transparent;
}
<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>
添加回答
舉報