Firefox中带caption表格嵌套inline-block表格时折叠边框被背景覆盖

问题描述 #

• 场景构建：为设置了背景色、使用border-collapse: collapse折叠边框样式的表格添加外边框时，将其包裹在设置了display: inline-block属性的div容器中。
• 正常表现：该写法在常规场景、嵌套入无<caption>标签的表格中时均可正常渲染。
• 异常表现：当外层表格带有<caption>标签时，内层表格的单元格背景会覆盖折叠边框；示例中单元格背景为半透明值，因此仍可观察到被覆盖的浅色边框痕迹。
• 问题效果截图：
• 相关已知问题：该异常表现和已存在十余年的Firefox编号688556的已知Bug高度相似，但该已知Bug仅在单元格设置相对定位时触发，与当前场景触发条件不符。
• 核心诉求：除了避免使用<caption>标签之外，是否存在其他可行的兼容解决方案？

完整复现代码 #

CSS代码 #

table {
  border-collapse: collapse;
  margin: 0;
}
table td {
  padding: 10px;
}
caption{
  font-weight: bold;
}


table.inner > tbody > tr > td {
  border: 3px solid red;
  background-color: rgba(255,165,0, .9);
}
table.inner > caption {
  color: red;
}
div {
  display: inline-block;
  border: 2px dotted red;
  padding: 20px;
}


table.outer {
  margin-top: 20px;
}
table.outer > tbody > tr > td {
  border: 3px solid blue;
}
table.outer > caption {
  color: blue;
}

HTML代码 #

<table class="outer">
  <tr>
    <td>outer table without caption</td>
  </tr>
  <tr>
    <td>
      <div>
        <table class="inner">
          <caption>inner</caption>
          <tr><td>a</td><td>b</td></tr>
          <tr><td>c</td><td>d</td></tr>
        </table>
      </div>
    </td>
  <tr>
</table>

<table class="outer">
  <caption>outer</caption>
  <tr>
    <td>outer table with caption</td>
  </tr>
  <tr>
    <td>
      <div>
        <table class="inner">
          <caption class="inner">inner</caption>
          <tr><td>a</td><td>b</td></tr>
          <tr><td>c</td><td>d</td></tr>
        </table>
      </div>
    </td>
  <tr>
</table>

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