如何修改IE渐变CSS以使用高度和第三种颜色？

Question

我有以下用于渐变的CSS：

对于IE 8-9

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d7d6d2',]
endColorstr='#f9ffff', GradientType=1);
/* IE 8–9 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#d7d6d2',
endColorstr='#f9ffff', GradientType=1)"; 

对于IE 10

background: -ms-linear-gradient(top, #d7d6d2 0%,#f9ffff 437px,#ffffff 100%);

对于IE 10版本，我有3种颜色。前两种颜色创建渐变，第三种颜色#ffffff在渐变结束时以白色显示页面的其余部分。437px定义了渐变的高度。

如何修改IE 8-9的CSS渐变代码，以便实现IE10版本的功能？

Answer 1

在IE8/9上做渐变的最好方法是使用CSS3Pie。

这是一个Javascript polyfill库，它将标准的CSS渐变语法实现到IE的旧版本中。(它还做了一些其他功能，如border-radius)。

只需按照说明下载Pie.htc文件并将其添加到您的站点，您就可以开始在IE6-9中使用标准的CSS渐变。

直接回答你的问题:CSS3Pie的渐变确实支持渐变色标。(但即使没有这样做，比-ms-filter更好的语法也足以促使我使用它)

希望这能有所帮助。

Answer 2

IE8不支持渐变色标。对于给定的元素(如div或按钮)，只能使用两种颜色。

至于IE9，您可以通过如下所示的svg渐变来实现：

/* SVG as background image (IE9/Chrome/Safari/Opera) */ 
background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc4MzUiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj4KPHN0b3Agc3RvcC1jb2xvcj0iI0Q3RDZEMiIgb2Zmc2V0PSIxIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0Y5RkZGRiIgb2Zmc2V0PSIwLjUiLz48c3RvcCBzdG9wLWNvbG9yPSIjRkZGRkZGIiBvZmZzZXQ9IjEiLz4KPC9saW5lYXJHcmFkaWVudD4KPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNnODM1KSIgLz4KPC9zdmc+);

微软有一个不错的SVG梯度生成器here。

如果您对此不感兴趣，可以模拟停止，这在this SO question中已经讨论过了。