0

代码：

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 解决这个问题？

4

3 回答 3

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

于 2013-08-19T16:12:03.887 回答
1

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

于 2013-08-19T16:12:30.417 回答
1

首先，对于 IE10：

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

其次，对于 IE9：

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

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

于 2013-08-19T16:13:46.800 回答