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

Question

代码：

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修复此问题？

Answer 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

Answer 2

看看这两个http://webdesignerwall.com/tutorials/cross-browser-css-gradient/comment-page-1和http://css3pie.com/，这可能会帮助您找到满足您需求的东西。

Answer 3

首先，对于IE10：

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

其次，对于IE9：

IE9不支持标准渐变语法。您可以使用IE8支持的旧式filter样式;这在IE9中确实有效，但这很糟糕 - 这是一种可怕的语法，感觉就像回到黑暗时代，它有一些讨厌的陷阱（与border-radius不相容......嘿）。

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