Safari 表行渐变背景重复错误答案

【问题标题】：Safari Table Row Gradient Background Repeat BugSafari 表行渐变背景重复错误
【发布时间】：2023-03-19 03:30:01
【问题描述】：

当我在tr标签中使用渐变背景时，它在其他浏览器中似乎可以正常工作，但背景代码似乎应用于Safari中的每个td标签。当您在 Safari 和其他浏览器中运行下面的示例代码时，您将理解我的意思。有人对此问题有解决方案建议吗？

铬：

Safari：

table {
  border-collapse: collapse;
}

tr {
  background: linear-gradient(90deg, rgba(255, 0, 0, 1) 0%, rgba(255, 0, 0, 1) 50%, rgba(255, 255, 255, 1) 50%);
}

td {
  border: 1px solid grey;
}

<table>
  <tr>
    <td>AAAAA</td>
    <td>BBBBB</td>
    <td>CCCCC</td>
  </tr>
  <tr>
    <td>AAAAA</td>
    <td>BBBBB</td>
    <td>CCCCC</td>
  </tr>
</table>

【问题讨论】：

标签： html css safari background gradient

【解决方案1】：

在 Safari 中（也在 IOS 上的 Chrome 中观察到）背景图像似乎被应用于每个 td 元素，而不是它们包含的 tr。

将display: block; 添加到 tr 元素会得到正确的结果。但是，我不知道这是否会干扰表格布局中的其他任何内容，因此需要在任何特定情况下进行检查。

这是sn-p。在 iPad 14 上的 Safari 和 Chrome 以及 Windows 10 上的 Chrome、Firefox 和 Edge 上测试。在 Windows10 上的 IE11 中给出错误结果。

table {
  border-collapse: collapse;
}

tr {
  display: block;
  background: linear-gradient(90deg, rgba(255, 0, 0, 1) 0%, rgba(255, 0, 0, 1) 50%, rgba(255, 255, 255, 1) 50%);
}

td {
  border: 1px solid grey;
}

<table>
  <tr>
    <td>AAAAA</td>
    <td>BBBBB</td>
    <td>CCCCC</td>
  </tr>
  <tr>
    <td>AAAAA</td>
    <td>BBBBB</td>
    <td>CCCCC</td>
  </tr>
</table>

【讨论】：

【解决方案2】：

尝试为表格设置背景，但不为 tr 设置背景。移除 tr 背景属性

table{
background: linear-gradient(90deg, rgba(255, 0, 0, 1) 0%, rgba(255, 0, 0, 1) 50%, rgba(255, 255, 255, 1) 50%);
}

【讨论】：

但我正在使用这个渐变来绘制深度图形。所以我需要在 tr 标签中使用这种背景样式。