Mozilla Firefox边框重叠问题求助：Chrome与Safari显示正常

我之前也踩过Firefox表格边框渲染的这个坑！你遇到的问题是Firefox对带有rowspan属性的表格单元格边框处理逻辑和Chrome/Safari不一致——Firefox会同时显示相邻单元格的边框，导致看起来重叠变粗，而另外两个浏览器会自动合并相邻边框。

问题背景 #

• 受影响浏览器：Firefox 58.0.2
• 正常表现：Chrome、Safari
• 症状：设置了rowspan=2的灰色侧边栏td，与右侧单元格的边框出现重叠

你的现有代码 #

HAML代码

%table{style: "border: none;"}
  %tbody.render_directories_table
    %tr
      %td{rowspan: 2, style: "background-color: #{color}; border: 2px solid #{color} !important;"} ...
      %td{colspan: 2} ...
    %tr
      %td ...
      %td ...

CSS代码

.render_directories_table > tr > td {
  border: 2px solid #e4e4e4 !important;
  padding: ...;
}

可行的解决方案 #

方案1：针对性移除重叠边框

通过CSS给带rowspan的单元格去掉右侧边框，让右侧单元格的左边框来衔接，避免叠加：

/* 给rowspan的单元格移除右侧边框 */
.render_directories_table > tr > td[rowspan] {
  border-right: none !important;
}
/* 给第一行的colspan单元格移除左侧边框 */
.render_directories_table > tr:first-child > td[colspan] {
  border-left: none !important;
}

这个方法改动最小，不会影响整体布局，完美适配你的现有结构。

方案2：使用表格边框合并属性

给表格添加border-collapse: collapse，让浏览器自动合并相邻边框，从根源解决叠加问题：
修改HAML中的表格属性：

%table{style: "border: none; border-collapse: collapse;"}

注意：启用border-collapse后，表格边框的计算方式会变化，如果你的边框样式有特殊要求，可能需要微调边框宽度或颜色。

方案3：用div模拟侧边栏（不推荐，改动较大）

如果前两个方案都不适用，可以把带rowspan的td换成绝对定位的div，脱离表格流来渲染侧边栏，但这个方法需要调整整体布局，适合表格结构不复杂的场景。

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