CSS渐变在IE9中能用吗？

Question

CSS渐变在IE9中能用吗？

internet-explorercssgradientinternet-explorer-9

6

很遗憾，我还没有一台可以测试IE9的机器（仍在使用XP），而且browsershots还不支持IE9。请问有人知道IE9是否支持CSS渐变？这是一个应用了渐变效果的页面。它能正常工作吗？

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

- David

4个回答

3

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以下版本进行定位，仍然可以使用旧的专有“filter”方法：

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

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

- neave

1

感谢您，neave... 这是我的 .NET 版本：http://blog.marcovalsecchi.it/2011/03/ie9-css3-gradient-support-net.html - valse

1

根据这篇文章，IE9不支持渐变。

- Rhapsody

1

IE9不支持CSS渐变。

请查看{{link1：Firefox 4和IE9之间的比较}}底部。

- Kriem

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- kapa · Accepted Answer

不支持。

请参见此处：http://caniuse.com/#search=gradient

不过，它将支持 SVG 作为背景，目前在 Opera 中用于制作渐变效果。