DOM-API 方法 Element.getBoundingClientRect 返回元素的边界。 不幸的是，这不一定是实际呈现内容的界限。 鉴于以下示例显示存在差异：
<html>
<head>
<style>
#float { float: left; }
</style>
<script>
function info() {
const boundFirst = document.getElementById('first').getBoundingClientRect();
const boundScnd = document.getElementById('scnd').getBoundingClientRect();
alert("First x: " + boundFirst.x + "; second x: " + boundScnd.x);
}
</script>
</head>
<body>
<p id="first">First</p>
<p id="float">XXXXX</p><p id="scnd">Second</p>
<p onclick="info()">Info</p>
</body>
</html>
正文渲染如下（或多或少）：
First
XXXXX Second
Info
点击信息显示以下信息：
First x: 8; second x: 8
但是，显然第二段的文字内容并没有和第一段的文字内容渲染在同一个x位置
如何确定（第二个）渲染文本的实际位置？
我找到了一个变通方法，它在所有情况下都不起作用，只需将一个空跨度作为第一个元素添加到段落并检索该跨度的位置。但这并非在所有情况下都有效，跨度也可能有其他一些副作用。
上下文：我需要该功能进行测试（使用 selenium webdriver）。我还尝试了 webdriver 的 API 函数 WebElement.getRect，但它返回的结果与 getBoundingClientRect 相同（根据其文档在后台使用）。
我的问题不是修复布局，而是检索显示文本的坐标以进行测试（例如，查找损坏的布局）。