Internet Explorer 9中的渐变效果

Question

有人知道在IE9中渐变的厂商前缀吗？还是我们仍然应该使用他们专有的滤镜？

我对其他浏览器的做法是：

background-image: -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #444444),color-stop(1, #999999)); /* Saf4+, Chrome */
filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999')"; /* IE8 */

还有，有人知道Opera的厂商前缀吗？

- Sniffer

---

IE9不支持渐变，但IE10会支持。 - Catch22

IE浏览器实在是一个很糟糕的浏览器，它不支持内联块、定位数值无缘无故出错，没有渐变支持，速度慢得要死...我们应该开始警告用户停止使用IE，而不是浪费时间去支持这种低劣的浏览器。就我个人而言，多年来我一直禁止IE用户访问我的页面（引导他们获取一个真正的浏览器），但我从未因此失去过任何销售机会。做些研究，你就会发现IE仅占所有互联网流量的<5%和销售额的<1%。为什么我们要支持它呢？ - user1931103

丹，我很想知道你的数字是从哪里来的，我找不到任何一个来源说IE的流量小于5%。 - Jamie Taylor

Jamie，开发人员常犯的一个错误是他们查看自己编程/网站开发相关网站的访问者统计数据，并将这些统计数据应用于整个网络。IE是目前使用最广泛的Web浏览器，令人沮丧的是仍有很多人在使用IE 8和9。 - Gavin

@Gavin - 实际上，根据大多数统计数据，Chrome在2012年左右就已经与IE持平，并且现在已经成为远远占主导地位的浏览器（无论是桌面还是移动设备）。但是，是的，IE仍然远未达到流量的5%。 - Alex

Answer 1

看起来我有点晚了，但这里有一些主要浏览器的示例：

/* IE10 */ 
background-image: -ms-linear-gradient(top, #444444 0%, #999999 100%);

/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, #444444 0%, #999999 100%);

/* Opera */ 
background-image: -o-linear-gradient(top, #444444 0%, #999999 100%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #444444), color-stop(1, #999999));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, #444444 0%, #999999 100%);

/* Proposed W3C Markup */ 
background-image: linear-gradient(top, #444444 0%, #999999 100%);

来源：http://ie.microsoft.com/testdrive/Graphics/CSSGradientBackgroundMaker/Default.html

注意：这些浏览器也支持使用rgb / rgba代替十六进制表示。

- Kevin Arthur

---

我认为IE10目前还不是一款主流浏览器。 - David Murdoch

@DavidMurdoch，从技术上讲是对的，但不加专有扩展到你的CSS中是没有意义的，因为我们知道它会是什么。毕竟，IE10注定会成为一款重要的浏览器。 - thepeer

@Robotsushi 尽管它没有回答IE9的问题（选中的答案是回答这个问题的，这可能是为什么它被选择的原因），但这个问题在谷歌搜索“internet explorer css gradients”时出现在第一页结果中，所以现在有些有用的东西对于即将推出Windows 7的IE10来说也没有伤害。 - Kevin Arthur

最新版本的Firefox和Opera支持W3C标准。（我在Windows 7上测试了Firefox 19和Opera 12.14） - Jeroen Versteeg

由于这是回答问题的最高投票答案，涉及IE9，因此它应该在末尾添加过滤器，以便包括IE9支持。 - Joel Coehoorn

Answer 2

最佳的跨浏览器解决方案是

background: #fff;
background: -moz-linear-gradient(#fff, #000);
background: -webkit-linear-gradient(#fff, #000);
background: -o-linear-gradient(#fff, #000);
background: -ms-linear-gradient(#fff, #000);/*For IE10*/
background: linear-gradient(#fff, #000);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#000000');/*For IE7-8-9*/ 
height: 1%;/*For IE7*/ 

- goksel

Answer 3

截至IE9 beta 1版本，您仍需要使用其专有过滤器。

- Gaurav

---

根据http://css3please.com的说法，IE10似乎将支持CSS渐变，这是个好消息... - Sniffer

css3please.com 帮助我找到了解决方案。谢谢。 - redolent

Answer 4

目前IE9不支持CSS3渐变。 不过，下面有一个不错的解决方案，使用PHP返回SVG（垂直线性）渐变，这样我们就可以在样式表中保留设计。

<?php

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

header('Content-type: image/svg+xml; charset=utf-8');

echo '<?xml version="1.0"?>
';

?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%">
    <defs>
        <linearGradient id="linear-gradient" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" stop-color="#<?php echo $from_stop; ?>" stop-opacity="1"/>
            <stop offset="100%" stop-color="#<?php echo $to_stop; ?>" stop-opacity="1"/>
        </linearGradient>
    </defs>
    <rect width="100%" height="100%" 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

---

优雅的解决方案。 FYI：我刚刚确认，对于支持“linear-gradient”的浏览器，SVG不会被下载。 - Jonathan Cross

我想知道是否有一种方法可以在创建这些SVG文件后对它们进行缓存。 - Mike Kormendy

一个更加健壮的问题是要找出请求缓存文件与每次生成文件流在时间和服务器负载方面的性能差异。 - Mike Kormendy

PHP不应该在您的UI设计中具有知识或帮助。将客户端需求保留在客户端上。 - Alex White

Answer 5

我在所有浏览器中使用的渐变代码：

background: #0A284B;
background: -webkit-gradient(linear, left top, left bottom, from(#0A284B), to(#135887));
background: -webkit-linear-gradient(#0A284B, #135887);
background: -moz-linear-gradient(top, #0A284B, #135887);
background: -ms-linear-gradient(#0A284B, #135887);
background: -o-linear-gradient(#0A284B, #135887);
background: linear-gradient(#0A284B, #135887);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0A284B', endColorstr='#135887');
zoom: 1;

你需要指定一个高度或使用zoom:1才能在IE中应用hasLayout到元素上使它正常工作。

---

更新：

以下是LESS Mixin（CSS）版本，供所有使用LESS的用户使用：

.gradient(@start, @end) {
    background: mix(@start, @end, 50%);
    filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorStr="@start~", EndColorStr="@end~")";
    background: -webkit-gradient(linear, left top, left bottom, from(@start), to(@end));
    background: -webkit-linear-gradient(@start, @end);
    background: -moz-linear-gradient(top, @start, @end);
    background: -ms-linear-gradient(@start, @end);
    background: -o-linear-gradient(@start, @end);
    background: linear-gradient(@start, @end);
    zoom: 1;
}

- Blowsie

---

作为一个LESS用户，我一直在寻找一种方法使渐变在IE9中也能正常工作。我发现了一篇博客文章详细介绍了如何生成SVG： http://blog.philipbrown.id.au/2012/09/base64-encoded-svg-gradient-backgrounds-in-less/ - James Long

Answer 6

Opera即将推出支持渐变效果和其他CSS特性的版本。

W3C CSS工作组甚至还没有完成CSS 2.1，大家都知道吧？我们打算很快就完成。CSS3被精确地模块化，以便我们可以更快地实现模块，而不是整个规范。

每个浏览器公司都使用不同的软件周期方法、测试等，所以这个过程需要时间。

我相信很多读者都知道，如果你在使用CSS3中的任何东西，你正在进行所谓的“渐进增强”——拥有最好支持的浏览器会得到最佳体验。另一方面，“优雅降级”意味着体验会令人满意，但可能不是最好或最具吸引力的，直到该浏览器实现了相关于你想要做的内容的模块或部分模块。

这创造了一个相当奇怪的情况，不幸的是前端开发人员会因此极度沮丧：实现的时间不一致。因此，这对双方来说都是一个真正的挑战——你会责怪浏览器公司、W3C，或者更糟糕的是——你自己（天知道我们不能了解所有的东西！）我们这些为浏览器公司和W3C小组成员工作的人会责怪自己吗？

当然不会。这总是一个平衡的游戏，至今我们还没有作为一个行业找出那个平衡点的方法。这就是在进化技术领域工作的乐趣 :)

- mollydotcom

Answer 7

我知道IE9仍然不支持CSS渐变，这很遗憾，因为它支持许多其他优秀的新功能。您可以考虑使用CSS3Pie来让所有版本的IE都支持各种CSS3特性（包括渐变、border-radius和box-shadow），而且非常方便。我相信CSS3Pie可以在IE9上运行（我已经在预发布版本上尝试过，但还没有在当前的beta版上尝试过）。

- Spudley

---

谢谢Spudley。我在IE6到8中使用CSS3Pie，但是我希望在IE9上不再使用它！我为每个IE都有一个单独的样式表，并在IE8中使用我的CSS3Pie样式。只要渐变是我当前使用的CSS3中唯一缺少的东西，如果可以摆脱CSS3Pie，我将为IE9添加另一个样式表。 - Sniffer

我甚至没有看到这篇帖子，我的错。只是写了一个答案并投票删除了相同信息。注意：要注意已知问题：http://css3pie.com/documentation/known-issues/ - NateDSaint

Answer 8

从版本11开始，Opera支持使用-o-供应商前缀的线性渐变。Chris Mills在Dev.Opera上撰写了一篇文章介绍它：http://dev.opera.com/articles/view/css3-linear-gradients/ 径向渐变仍在开发中（包括规范和Opera内部）。

- webinista

Answer 9

不确定IE9是否支持，但是Opera似乎还没有渐变支持:

• http://www.opera.com/docs/specs/presto26/#css

该页面上没有“gradient”一词的出现。

然而，Robert Nyman有一篇很棒的文章，介绍如何在所有不支持Opera的浏览器中使用CSS渐变：

• http://robertnyman.com/2010/02/15/css-gradients-for-all-web-browsers-without-using-images/

不确定它是否可以扩展以使用图像作为备选方案。

- Paul D. Waite

---

这让我感到惊讶，因为Opera通常是实施标准的先锋。谢谢你的回答，Paul。 - Sniffer

我认为渐变色目前还没有成为标准。据我了解，新的CSS特性往往会在浏览器中实现，然后最终被规范化。我相信WebKit团队最先在CSS中实现了渐变色（除非你算上微软和他们的“filter”东西，但在我看来这并不真正算作CSS）。Firefox现在也跟随了他们，但似乎W3C CSS草案中还没有任何关于此的内容：请参见http://www.google.co.uk/search?hl=en&source=hp&q=gradient+site:www.w3.org - Paul D. Waite

Answer 10

使用渐变生成器 - 一切都将完美无缺 ;) http://www.colorzilla.com/gradient-editor/

- Jules