3 列 3 行 HTML 表格在 Mobile Safari 中中断，但在 Chrome 和 Firefox 中工作正常答案

【问题标题】：3 column 3 row HTML table breaks in Mobile Safari but works fine in Chrome and Firefox3 列 3 行 HTML 表格在 Mobile Safari 中中断，但在 Chrome 和 Firefox 中工作正常
【发布时间】：2020-11-19 07:29:51
【问题描述】：

Chrome 和 Firefox

IOS 14 上的移动 Safari

Z-index 似乎被忽略了，看起来好像 pseudo elements 没有正确锚定到 tbody 元素并且远远超出其父元素。

可以进行哪些调整以使 Mobile Safari 的行为类似于 Chrome 和 Firefox？我正在使用pseudo elements 来模拟重叠表行的外观。如果不使用pseudo elements 也可以实现这种外观，那也是适合我的解决方案。

th:first-child, tbody td:first-child {
  border-top-left-radius: 1.5rem;
}
th:last-child, tbody td:last-child {
  border-top-right-radius: 1.5rem;
}
tbody, tbody td {
  position: relative;
  z-index: 10;
  transform: scale( 1 );
}
tbody td {
  background-color: #333;
}
tbody td:first-child, tfoot td:first-child {
  border-bottom-left-radius: 1.5rem;
}
tbody td:last-child, tfoot td:last-child {
  border-bottom-right-radius: 1.5rem;
}
tbody::before, tbody::after {
  position: absolute;
  z-index: -10;
  top: 0; right: 0; bottom: 50%; left: 0;
  background-color: #222;
  content: "";
}
tbody::after {
  top: 50%; right: 0; bottom: 0; left: 0;
  background-color: #444;
}
tfoot td { background-color: #444; }

<style>
  html, table, p {
    margin: 0;
    padding: 0 !important;
    color: #ddd;
  }
  html {
    font-family: Arial;
    text-align: center;
    text-transform: capitalize;
  }
  table, th, td {
    padding: 1rem;
    border-spacing: 0;
  }
  thead th {
    background-color: #222;
  }
  th { text-transform: uppercase; }
  td { border-bottom: solid #222; }
</style>
<table>
  <thead>
    <tr> <th><p>one</p></th><th><p>two</p></th><th><p>three</p></th> </tr>
  </thead>
  <tbody>
    <tr> <td><p>four</p></td><td><p>five</p></td><td><p>six</p></td> </tr>
  </tbody>
  <tfoot>
    <tr> <td><p>seven</p></td><td><p>eight</p></td><td><p>nine</p></td> </tr>
  </tfoot>
</table>

【问题讨论】：

标签： css ios html-table mobile-safari pseudo-element

【解决方案1】：

tbody 元素在 Safari 中的呈现方式似乎存在问题。

完全摆脱pseudo elements 而是使用linear-gradient 并在表格单元格后面的table 元素本身上硬停止似乎提供与桌面浏览器相同的结果，而在Mobile Safari 中没有任何问题。

th:first-child, tbody td:first-child {
  border-top-left-radius: 1.5rem;
}
th:last-child, tbody td:last-child {
  border-top-right-radius: 1.5rem;
}
tbody, tbody td {
  position: relative;
  z-index: 10;
  transform: scale( 1 );
}
tbody td {
  background-color: #333;
}
tbody td:first-child, tfoot td:first-child {
  border-bottom-left-radius: 1.5rem;
}
tbody td:last-child, tfoot td:last-child {
  border-bottom-right-radius: 1.5rem;
}
tfoot td { background-color: #444; }
table {
  background-image: 
    linear-gradient( 
      transparent 30%, #222 30% 50%, #444 50% 70%, transparent 70% 100%
    );
}

<style>
  html, table, p {
    margin: 0;
    padding: 0 !important;
    color: #ddd;
  }
  html {
    font-family: Arial;
    text-align: center;
    text-transform: capitalize;
  }
  table, th, td {
    padding: 1rem;
    border-spacing: 0;
  }
   thead th {
    background-color: #222;
  }
  th { text-transform: uppercase; }
  td { border-bottom: solid #222; }
</style>
<table>
  <thead>
    <tr> <th><p>one</p></th><th><p>two</p></th><th><p>three</p></th> </tr>
  </thead>
  <tbody>
    <tr> <td><p>four</p></td><td><p>five</p></td><td><p>six</p></td> </tr>
  </tbody>
  <tfoot>
    <tr> <td><p>seven</p></td><td><p>eight</p></td><td><p>nine</p></td> </tr>
  </tfoot>
</table>

【讨论】：