Safari 表格行渐变背景重复错误 [英] Safari Table Row Gradient Background Repeat Bug

问题描述

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

When I use the gradient background in the tr tag, it seems to work normally in other browsers, but it seems as if the background code is applied to each td tag in Safari. You will understand what I mean when you run the sample code below both in Safari and in another browser. Anyone have a solution suggestion for this issue?

铬:

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>

推荐答案

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

In Safari (and also observed in Chrome on IOS) the background image seems to be being applied to each td element rather than their containing tr.

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

Adding display: block; to the tr element gives the correct result. However, I do not know whether this would disturb anything else in the table layout so this would need to be checked in any particular case.

这是片段.在 iPad 14 上的 Safari 和 Chrome 以及 Windows 10 上的 Chrome、Firefox 和 Edge 上进行测试.在 Windows10 上的 IE11 中给出错误结果.

Here’s the snippet. Tested on Safari and Chrome on iPad 14 and Chrome, Firefox, and Edge on Windows 10. Gives wrong result in IE11 on Windows10.

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>

这篇关于Safari 表格行渐变背景重复错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！