Chrome中sticky表格单元格使用getBoundingClientRect结果不一致问题

核心差异根源 #

Chrome与Firefox对getBoundingClientRect()的计算逻辑存在分歧：

• Chrome：当表格存在横向滚动条时，会将滚动条宽度（默认17px）计入元素的视口左侧偏移量。当表格行包含换行文本触发布局重排后，这个偏移量会被持续应用到后续的位置计算中。
• Firefox：始终以视口左侧为基准计算元素位置，不会将横向滚动条宽度纳入getBoundingClientRect().left的结果，因此菜单位置始终准确。

首次hover正常的原因 #

首次触发菜单时，表格未发生横向滚动或布局未更新，Chrome的getBoundingClientRect().left尚未包含滚动条偏移量；当鼠标移至换行文本行时，表格触发布局重排，Chrome的位置计算逻辑更新，后续所有行的菜单位置都会叠加滚动条宽度，导致错位。

修复方案 #

修改JavaScript中菜单位置的计算逻辑，抵消Chrome的滚动条偏移影响：

// 替换原有的left位置计算
const table = document.querySelector('.table');
const btnRect = btn.getBoundingClientRect();
menu.style.left = `${btnRect.left - table.scrollLeft}px`;

通过减去表格的横向滚动偏移量，让菜单位置在两个浏览器中保持一致。

内容的提问来源于stack exchange，提问作者EvilDr