Question

我使用渐变作为背景：

-moz-linear-gradient(center bottom , #E8E8E8 0%, #F2F2F1 50%) repeat scroll 0 0 #F5F5F4;

这没有在IE中显示，如果浏览器是IE，我还没有找到关于我需要做什么的链接或任何内容。

关于如何处理这个的任何想法？

Answer 1

您可能有兴趣阅读此内容：prefix or posthack。

由于注释状态-moz-是Mozilla的供应商特定前缀。

如果您对跨浏览器渐变感兴趣，我发现最简单的方法是使用gradient generator对所有不同的实现和前缀进行排序。

Answer 2

这是所有浏览器的渐变代码

   /* IE10 */ 
background-image: -ms-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%);

/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%);

/* Opera */ 
background-image: -o-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%);

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

/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%);

/* Proposed W3C Markup */ 
background-image: linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%);

您可以使用此网站生成渐变ultimate css generator

它在IE9中不受支持，因此您可以制作渐变的一小部分并重复它

Answer 3

通过CSS3进行线性渐变绘制仍然是实验性的。您提供的CSS功能是特定于Mozilla的，如-moz前缀所示。但并非所有内容都丢失了，因为微软也有自己的实现（-ms-linear-gradient）

粗略地看一眼，看起来您只需复制该行，只需将-moz更改为-ms，即可获得近乎完美的兼容性。如果您遇到任何问题，请参阅文档。

Answer 4

对IE使用gradient过滤器：

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff'); /* for IE */

-moz-linear-gradient不适用于IE

4 个答案: