Question

不幸的是，我没有可以测试IE9的机器（仍在XP中），而且浏览器仍然没有IE9。有人能告诉我IE9是否支持css渐变？这是一个应用了渐变的页面。它有效吗？

http://www.webdesignerwall.com/demo/css3-dropdown-menu/css-gradient-dropdown.html

Answer 1

没有。

它将支持SVG作为背景，目前用于制作Opera的渐变。

Answer 2

IE9目前缺乏CSS3渐变支持。但是，这是一个很好的解决方案，使用PHP来返回一个SVG（垂直线性）渐变，这样我们就可以将我们的设计保留在样式表中。

<?

header('Content-type: image/svg+xml; charset=utf-8');
echo '<?xml version="1.0"?>
';

$from_stop = isset($_GET['from']) ? $_GET['from'] : '000000';
$to_stop = isset($_GET['to']) ? $_GET['to'] : '000000';

?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" preserveAspectRatio="none" width="100%" height="100%">
    <defs>
        <linearGradient id="linear-gradient" x1="0%" y1="0%" x2="0%" y2="100%" spreadMethod="pad">
            <stop offset="0%" stop-color="#<?=$from_stop?>" stop-opacity="1"/>
            <stop offset="100%" stop-color="#<?=$to_stop?>" stop-opacity="1"/>
        </linearGradient>
    </defs>
    <rect width="100%" height="100%" style="fill: url(#linear-gradient);"/>
</svg>

只需将其上传到您的服务器并按如下方式调用URL：

gradient.php?from=f00&to=00f

这可以与你的CSS3渐变一起使用：

.my-color {
    background-color: #f00;
    background-image: url(gradient.php?from=f00&to=00f);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f00), to(#00f));
    background-image: -webkit-linear-gradient(top, #f00, #00f);
    background-image: -moz-linear-gradient(top, #f00, #00f);
    background-image: linear-gradient(top, #f00, #00f);
}

如果您需要定位到IE9以下，您仍然可以使用旧的专有“过滤器”方法：

.ie7 .my-color, .ie8 .my-color {
    filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr="#ff0000", endColorStr="#0000ff");
}

当然，您可以修改PHP代码以在渐变上添加更多停靠点，或使其更复杂（径向渐变，透明度等），但这对于那些简单（垂直）线性渐变非常有用。

Answer 3

根据this article，IE9不支持渐变。

Answer 4

IE9不支持CSS渐变。

查看this comparison between Firefox 4 and IE9的底部。

CSS Gradients在IE9中有效吗？

4 个答案: