2

我在下面有这段代码，它创建了一个背景径向圆渐变。

它在除 IE 之外的所有浏览器上运行良好（即使在 IE9 上也无法运行）

我应该向 css 添加什么才能使其在 IE9 和 IE8 上也能正常工作？

http://jsfiddle.net/bhBtw/

编码：

<!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>
4

1 回答 1

7
  1. IE 9 及以下不支持 CSS 渐变。所以它不应该在 IE 9 和更早版本中工作。
  2. 不需要-ms-linear-gradient线。在 IE10 中支持不带前缀的渐变，在 IE9 和更早版本中根本不支持渐变。
  3. 您应该始终将无前缀版本放在最后。如果您不将无前缀版本放在最后，即使支持无前缀语法的浏览器仍将使用带前缀的语法。
  4. 新的渐变语法使用farthest-corner而不是cover. 这是默认值，所以你可以忽略它。
  5. center是位置的默认值（因此您也可以将其省略）。

IE9 及以上版本应该怎么做？不多。后备：

  • 线性IE 过滤器梯度 或
  • 具有该渐变的背景图像或
  • 只是一种纯色（在这种情况下我会选择这个选项，因为您在这里使用的两种颜色彼此没有太大区别，而且大多数人甚至无法在不仔细观察的情况下判断那里有渐变）

因此该代码应变为：

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);
于 2013-01-20T12:25:37.690 回答