Firefox与Chromium内核浏览器<td>样式渲染差异解决方案求助

核心是两款浏览器对带rowspan属性的表格空行高度分配规则存在差异：

• 你的HTML代码中存在两个没有内容的空<tr>标签，用于配合单元格rowspan=2实现跨行布局
• Chromium内核会自动将跨行单元格的总高度平均分配给覆盖的所有行，主动匹配你给单元格设置的高度值
• Firefox不会主动为空行分配高度，也不会自动拆分跨行单元格的总高度到对应行，导致空行高度不符合预期，最终整体表格渲染错乱
• 你之前添加table-layout: fixed没有生效，是因为该属性仅控制表格列宽的计算逻辑，对行高分配规则没有影响

无需修改HTML，保留原有CSS规则，新增以下CSS即可：

/* 消除表格默认样式的浏览器差异 */
.tableC {
  border-collapse: collapse;
  border-spacing: 0;
}
/* 统一单元格盒模型，避免边框撑高元素 */
.tableC td {
  box-sizing: border-box;
  padding: 0;
}
/* 给所有行固定高度，两行总高度刚好匹配跨行单元格的150px设置 */
.tableC tr {
  height: 75px;
}

该方案给所有行统一设置75px固定高度后，跨行单元格的总高度会自动等于两行高度之和（75px*2=150px），完全匹配你原本设置的单元格尺寸，两款浏览器的渲染效果就会完全一致。

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