如何为 IE 9 和 10 修复此渐变？答案

【问题标题】：How do I fix this gradient for IE 9 and 10?如何为 IE 9 和 10 修复此渐变？
【发布时间】：2013-08-21 12:17:07
【问题描述】：

代码：

body {
    background-color: #CACACA;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#CACACA), to(#F6FAFB));
    background-image: -webkit-linear-gradient(top, #CACACA, #F6FAFB);
    background-image:    -moz-linear-gradient(top, #CACACA, #F6FAFB);
    background-image:     -ms-linear-gradient(top, #CACACA, #F6FAFB);
    background-image:      -o-linear-gradient(top, #CACACA, #F6FAFB);
}

在所有浏览器和平台上使用它都很棒，但对于 IE 10，渐变块会像这样重复：

对于 IE 10，我可以做些什么来解决这个问题？

对于 IE 9，渐变甚至不起作用，它只会显示 #CACACA。我该如何为 IE 9 解决这个问题？

【问题讨论】：

标签： internet-explorer css internet-explorer-9 internet-explorer-10 linear-gradients

【解决方案1】：

对于 IE10：background-image: -ms-linear-gradient(top, color[, color]*);

对于 IE9：filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='color1', endColorstr='color2', GradientType=0);

不重复：background-repeat: no-repeat

【讨论】：

【解决方案2】：

看看这两个http://webdesignerwall.com/tutorials/cross-browser-css-gradient/comment-page-1 和http://css3pie.com/ 这可能会帮助你想办法满足你的需求。

【讨论】：

【解决方案3】：

首先，对于 IE10：

删除-ms-linear-gradient，只使用不带前缀的linear-gradient； IE10 不需要前缀，IE9 根本不支持有或没有前缀的标准。所以-ms- 前缀是完全没有必要的。

其次，对于 IE9：

IE9 不支持标准渐变语法。您可以使用 IE8 支持的老式 filter 样式；这在 IE9 中确实有效，但很糟糕——它的语法很糟糕，感觉就像回到了黑暗时代，而且它有一些令人讨厌的陷阱（与 border-radius 不兼容......呵呵）。

相反，我建议使用旧的 polyfill 脚本CSS3Pie 来支持 IE9 中的标准渐变语法。让事情变得更容易处理。

【讨论】：