Safari table-row渐变色不兼容

Safari浏览器在渐变色的表格行(Table-Row)上的渲染方式与其他浏览器不同，可能会导致不兼容的问题。具体来说，Safari浏览器在渐变色的表格行上只会渲染第一个单元格，而其他浏览器则会渲染整个表格行。

解决这个问题的方法是使用CSS伪元素(::before 或 ::after)将渐变色应用到表格行的伪元素上，而不是直接应用到表格行上。这样可以确保不同浏览器上表格行的渲染方式相同。

下面是一个示例代码，使用伪元素来实现表格行的渐变色：

tr {
    position: relative;
    z-index: 1;
}

tr::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #fff 0%, #f2f2f2 100%);
}

在上面的代码中，我们将表格行的定位(position)设置为相对(relative)，然后应用了一个z-index来确保伪元素在表格行之下。接着，我们使用伪元素(::before)来创建一个与表格行相同尺寸的元素，并将其定位(position)设置为绝对(absolute)。最后，我们在伪元素上应用了渐变色。

这样做可以确保在Safari浏览器和其他浏览器上都能正确地渲染表格行的渐变色。