CSS Gradients 在 IE9 中有效吗？

Posted 2023-03-06

【中文标题】CSS Gradients 在 IE9 中有效吗？

【英文标题】：Do CSS Gradients work in IE9?

【发布时间】：2011-06-29 02:05:19

【问题描述】：

不幸的是，我还没有可以在其上测试 IE9 的机器（仍然在 XP 中），并且 browsershots 还没有执行 IE9。谁能告诉我 IE9 是否支持 CSS 渐变？这是一个应用了渐变的页面。有用吗？

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

【参考方案1】：

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"  >
    <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   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 代码以在渐变上添加更多停止点，或者使其更复杂（径向渐变、透明度等），但这对于那些简单的（垂直）线性渐变非常有用。

【讨论】：

谢谢你...这里是我的 .NET 版本：[blog.marcovalsecchi.it/2011/03/… [1]：blog.marcovalsecchi.it/2011/03/…

【参考方案2】：

IE9 不支持 CSS 渐变。

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

【参考方案3】：

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

【参考方案4】：

没有。

请看这里：http://caniuse.com/#search=gradient

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

【讨论】：

好的，所以它不起作用，但是我们如何在 HTML 中的元素上使用 SVG？ SVG 对我来说是全新的。

@David：看看这个：***.com/questions/4084614/…

请注意，Opera 从 v11.10 开始支持线性渐变：dev.opera.com/articles/view/css3-linear-gradients