Firefox中背景覆寫的折疊邊框，如果被inline-block和帶有標題的表格包圍-有解無憂

顯然我發現了最奇怪的 Firefox 小錯誤：

我有一張帶有背景顏色和折疊邊框的表格。
為了在它周圍加上一個邊框，它被包裹在一個divwith 中display: inline-block。

這很好用，當我在表格中顯示它時也可以使用。
但是當周圍的桌子有時caption，背景會覆寫邊框。
（這里的背景顏色是透明的，所以可以看到淺色邊框。）

Firefox 中背景覆寫的折疊邊框，如果被 inline-block 和帶有標題的表格包圍

這類似于十年前的 Firefox 錯誤688556。（見這個問題。）
但這應該只發生在細胞相對定位時。

除了避免使用caption標簽之外，還有其他解決方法嗎？

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;
}

<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>

uj5u.com熱心網友回復：

嘗試使用隔離css 屬性。這將隔離每個表并可能解決您的問題。

隔離 CSS 屬性確定元素是否必須創建新的堆疊背景關系。MDN 檔案

table {
  border-collapse: collapse;
  margin: 0;
  isolation: isolate; /* added */
}

顯示代碼片段

table {
  border-collapse: collapse;
  margin: 0;
  isolation: isolate;
}

table td {
  padding: 10px;
}

caption {
  font-weight: bold;
}

table.inner>tbody>tr>td {
  border: 3px solid red;
  background-color: rgba(255, 165, 0, 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;
}

<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>
  <tr></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>
  <tr></tr>
</table>

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/492773.html

標籤：css 火狐 html表

上一篇：在GooglePlay訂單歷史記錄中過濾掉0.00美元的價值

下一篇：如何修復洗掉cookie后收到的警告“Cookie'cookie_name'willbedeniedsoon...”？