Chrome渲染表格<tr>元素1px底部边框不一致问题求助

问题本质 #

这不是严格意义上的Chrome Bug，而是Blink引擎在高DPI缩放环境下的亚像素渲染差异。Windows 11的4K显示器开启缩放后，元素实际渲染的坐标可能是小数像素值，Chrome对tr元素的1px边框进行亚像素插值时，部分行的边框会因像素叠加/对齐问题显得更粗；而Firefox的Gecko引擎处理这类像素对齐的逻辑不同，因此没有该问题。

替代解决方案（无需修改边框宽度） #

以下是几种经过验证的修复方法：

1. 触发GPU加速强制像素对齐 #

给tr元素添加GPU加速属性，强制Chrome将元素对齐到整数像素边界，消除亚像素插值导致的边框粗细差异：

tbody tr {
  border-bottom: 1px solid #000;
  transform: translateZ(0); /* 或 will-change: transform */
}

2. 使用表格边框合并模式 #

放弃给tr设置边框，改为给td/th设置边框，并开启表格边框合并，让浏览器统一处理边框渲染逻辑：

table {
  border-collapse: collapse;
}
tbody td {
  border-bottom: 1px solid #000;
}

3. 用伪元素替代tr边框 #

通过绝对定位的伪元素模拟边框，精确控制边框的像素位置：

tbody tr {
  position: relative;
  overflow: hidden; /* 防止边框溢出 */
}
tbody tr::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background-color: #000;
}

4. 调整布局触发重新计算 #

给表格容器添加zoom: 1或transform: scale(1)，强制浏览器重新计算元素布局，修正像素偏移：

table {
  zoom: 1;
}

注意事项 #

• 不同Chrome版本对上述方案的支持略有差异，建议优先测试边框合并和GPU加速方案，这两种方法兼容性最好。
• 若系统缩放比例调整，可能需要重新验证方案效果。

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