css tr 渐变,【CSS】Safari浏览器中的渐变问题（给tr添加的渐变效果作用在了td上）...

我想给表格的每一行(tr)增加一个从左到右背景色的渐变,

在谷歌浏览器中显示的是正常的,如下图

但是在Safari浏览器中，却是每个单元格(td)都显示了渐变的背景色,如下图

代码：

tr{

background-color: #1FA9F4; /* Old browsers */

background-image: -moz-linear-gradient(right, red 0%, green 100%); /* FF3.6+ */

background-image: -webkit-gradient(linear, left right, left right, color-stop(0%, red), color-stop(100%,green)); /*Chrome,Safari4+*/

background-image: -o-linear-gradient(right, red 0%, green 100%); /* Opera 11.10+ */

background-image: -ms-linear-gradient(right, red 0%, green 100%); /* IE10+ */

background-image: linear-gradient(to right, red 0%, green 100%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='red', endColorstr='green',GradientType=0 ); /* IE6-8 */

}

姓名11	电话111	住址111
姓名22	电话222	住址222

回答：

这说明safri中的tr不支持背景渐变。

可以尝试用tr背景透明，并给其加上伪元素::after,然后将伪元素设置为z-index=-1的块级元素，在这个div上应用背景渐变。