Question

我在下面的代码中创建了一个背景径向圆渐变。

它在IE以外的所有浏览器上运行良好（即使在IE9上也不工作）

我应该在css上添加什么才能使它在IE9和IE8上运行？

代码：

<!DOCTYPE html>
<html>
    <head>
    <title></title>
    <style type="text/css" media="screen">
        html { 
            background-color: #eee;
            height:768px;
        }
        div {
            width: 96%;
            height: 800px;
            padding: 10px;
            margin:0 auto;
        }

        div.circle {
            background-image: radial-gradient(center center, circle cover, #352e24, #1a160d);
            background-image: -o-radial-gradient(center center, circle cover, #352e24, #1a160d);
            background-image: -ms-radial-gradient(center center, circle cover, #352e24, #1a160d);
            background-image: -moz-radial-gradient(center center, circle cover, #352e24, #1a160d);
            background-image: -webkit-radial-gradient(center center, circle cover, #352e24, #1a160d);
        }
    </style>
</head>
    <body>
        <div class="circle"></div>
    </body>
</html>

Answer 1

IE到9并不包括CSS渐变。所以它不适用于IE 9及更早版本。
There is no need for the -ms-linear-gradient line。渐变are supported unprefixed in IE10 and they are not supported at all in IE9 and older。
您应该始终将未加前缀的版本放在最后。如果您没有将未加前缀的版本放在最后，即使支持无前缀语法的浏览器仍会使用带前缀的版本。
The new gradient syntax uses farthest-corner instead of cover。这是默认值，因此您可以将其删除。
center是position的默认值（因此您也可以将其保留）。

你应该为IE9及更老版做些什么？不多。回归：

a linear IE filter gradient 或
具有该渐变或
只是一种纯色（在这种情况下我选择的选项，因为你在这里使用的两种颜色彼此没有那么不同，大多数人甚至不知道那里有一个渐变而没有看密切）

所以代码应该成为：

background: #352e24; /* ultimate fallback, always put this, just in case */

/* if you choose the IE filter linear gradient fallback */
filter: progid:DXImageTransform.Microsoft.gradient(
             startColorstr=#352e24, endColorstr=#1a160d);

/* if you choose to use the image fallback */
background: url(gradient.png);

/* Chrome, Safari */
background: -webkit-radial-gradient(circle, #352e24, #1a160d);

/* Firefox 15 and older, Firefox for Android */
background: -moz-radial-gradient(circle, #352e24, #1a160d);

/* Opera 11.6 (older only supported linear), Opera 12.0, Opera Mobile 12.0 */
background: -o-radial-gradient(circle, #352e24, #1a160d);

/* standard syntax, IE10, Firefox 16+, Opera 12.1+ */
background: radial-gradient(circle, #352e24, #1a160d);

css3背景径向圆梯度

1 个答案: