为何tr/td带边框时Firefox与Chrome的tr offsetTop值不一致？

当表格内的<tr>或其包含的<td>带有上下边框时，Firefox与Chrome（Brave版本）中<tr>的offsetTop返回结果存在差异。预期第一个<tr>的offsetTop值为0，但Firefox中因边框宽度影响返回1，无边框时二者均返回0。

由于<tr>的offsetTop能便捷获取表格中所有行的位置（无论包含在多少个<tbody>中），且<tr>.rowIndex会随行的增删、排序自动更新，表格元素十分实用。现需明确：

• 这仅是浏览器差异（或Firefox的问题）吗？
• 是否可通过调整CSS使Firefox返回0或Chrome返回1？

场景1：边框设置在<td>元素上 #

代码示例 #

let
   tr = document.querySelectorAll('tr')
   l = tr.length
;
for (let i = 0; i < l; i++ )
  console.log(`${tr[i].offsetTop} ${tr[i].offsetHeight}`);

* {
  box-sizing: border-box;
}
table {
 border-collapse: collapse;

}
table, tbody, tr {
 border: 0;
 margin: 0;
 padding: 0;
}
td {
  border-color: transparent transparent rgb(221,232,237) transparent;
  border-style: solid;
  border-width: 0.1rem 0 0.1rem 0;

}

<table>
<colgroup>
 <col class="track">
</colgroup>
<tbody>
 <tr><td>Row index 0</td></tr>
 <tr><td>Row index 1</td></tr>
 <tr><td>Row index 2</td></tr>
</tbody>
</table>

浏览器输出 #

Firefox输出：

1 25
26 25
51 25

Chrome（Brave）输出：

0 25
25 25
50 25

场景2：边框设置在<tr>元素上 #

此时两个浏览器返回结果完全一致。

代码示例 #

let
   tr = document.querySelectorAll('tr')
   l = tr.length
;
for (let i = 0; i < l; i++ )
  console.log(`${tr[i].offsetTop} ${tr[i].offsetHeight}`);

* {
  box-sizing: border-box;
}
table {
 border-collapse: collapse;

}
table, tbody, tr {
 border: 0;
 margin: 0;
 padding: 0;
}

tr {
  border-color: transparent transparent rgb(221,232,237) transparent;
  border-width: 0.1rem 0 0.1rem 0;
  border-style: solid;
}

<table>
<colgroup>
 <col class="track">
</colgroup>
<tbody>
 <tr><td>Row index 0</td></tr>
 <tr><td>Row index 1</td></tr>
 <tr><td>Row index 2</td></tr>
</tbody>
</table>

问题解答 #

1. 这是浏览器布局计算的细节差异
   这种差异源于Firefox和Chrome在border-collapse: collapse模式下，对单元格边框归属的布局逻辑不同：Firefox将<td>的顶部边框计算为<tr>的外部偏移量，而Chrome则将其纳入<tr>的内部高度计算，导致offsetTop起始值不同。这并非某一方的bug，而是不同浏览器对CSS表格布局规范的细节实现差异。

2. 通过CSS统一结果的方案

方案一：让Firefox返回0（对齐Chrome） #

用内边距+背景渐变模拟<td>的上下边框，避免边框被计算为<tr>的外部偏移：

td {
  padding: 0.1rem 0;
  background: linear-gradient(rgb(221,232,237), rgb(221,232,237)) 0 0/100% 0.1rem,
              linear-gradient(rgb(221,232,237), rgb(221,232,237)) 0 100%/100% 0.1rem;
  background-repeat: no-repeat;
}

方案二：让Chrome返回1（对齐Firefox） #

给<table>添加与<td>顶部边框宽度一致的透明顶部边框，强制<tr>起始位置偏移：

table {
  border-collapse: collapse;
  border-top: 0.1rem solid transparent;
}

最简洁的统一方案 #

直接采用场景2的写法，将边框设置在<tr>上，此时两个浏览器的offsetTop计算逻辑完全一致，无需额外调整。

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