在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML5  HTML/ Safari瀏覽器中的漸變問題（給tr添加的漸變效果作用在了td上）

Safari瀏覽器中的漸變問題（給tr添加的漸變效果作用在了td上）

我想給表格的每一行(tr）增加一個從左到右背景色的漸變,
在谷歌瀏覽器中顯示的是正常的,如下圖

clipboard.png

但是在Safari瀏覽器中，卻是每個單元格(td)都顯示了漸變的背景色,如下圖

clipboard.png

代碼：

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title></title>
<style>
    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 */
    }
</style>
</head>

<body>
    <table>
        <tbody>
            <tr>
                <td>姓名11</td>
                <td>電話111</td>
                <td>住址111</td>
            </tr>
            <tr>
                <td>姓名22</td>
                <td>電話222</td>
                <td>住址222</td>
            </tr>
        </tbody>
    </table>
</body>
</html>
回答
編輯回答
撿肥皂

這說明safri中的tr不支持背景漸變。
可以嘗試用tr背景透明，并給其加上偽元素::after,然后將偽元素設(shè)置為z-index=-1的塊級元素，在這個div上應(yīng)用背景漸變。

2018年6月5日 15:32