iOS html 表格行和线性渐变看起来不正确答案

【问题标题】：iOS html table rows and linear graident don't look correctiOS html 表格行和线性渐变看起来不正确
【发布时间】：2021-09-22 23:41:41
【问题描述】：

在 iOS 上，这似乎是每列，而在 Web 上它很好地穿过行。您可以在桌面上查看下面的表格标题，而不是尝试 iOS。屏幕截图附在 iOS 上。

https://nikeeyb.com/eybl-standings/

.widgets-pools table tr.font-weight-bold {
    background: linear-gradient(to right, #E82276, #FFFFFF);
}

【问题讨论】：

标签： html css ios html-table linear-gradients

【解决方案1】：

这似乎在过去的浏览器中很常见，例如 table row background image 或 Background Image on <tr>

现在在 Chrome/Edge 和 Firefox Windows10 上尝试您的网站一切似乎都很好，线性渐变跨越了整个 tr。

在 Safari（我使用 iPad IOS14 测试）上，问题似乎仍然存在。

您可以尝试在 tr 上放置一个伪元素，并将所需的线性渐变作为背景，因为它不应该被那里的 tds 混淆。

您可以尝试添加此 CSS：

  .widgets-pools table tr.font-weight-bold {
    position: relative;    
  }
  .widgets-pools table tr.font-weight-bold::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, #E82276, #FFFFFF);
    z-index: -1;
  }

（编辑：并从 tr 本身中删除背景）。让我知道会发生什么。

【讨论】：