跨不同浏览器的多种背景颜色

Question

在我的横幅中，我有一个渐变。以下是对Chrome，Firefox和Linux的支持。 IE浏览器。但是，IE 9不支持ms-linear-gradient方式的渐变。 IE 9上的访问者可以使横幅变成纯色吗？当我在IE 9上访问它时，背景是白色的。

 background: -moz-linear-gradient(#7AAC41, #16590f);
 background: -webkit-linear-gradient(#7AAC41, #16590f);
 background: -ms-linear-gradient(#7AAC41, #16590f);

Answer 1

您只需在渐变标记之前添加“默认”背景，如下所示：

background: #7AAC41
background: -moz-linear-gradient(#7AAC41, #16590f);
background: -webkit-linear-gradient(#7AAC41, #16590f);
background: -ms-linear-gradient(#7AAC41, #16590f);

当页面在IE中呈现时，浏览器将无法理解-moz-linear-gradient，-webkit-linear-gradient和-ms-linear-gradient属性，但会理解background属性。同样，在其他浏览器中，浏览器理解的最后一个属性将是颜色。

这称为writing a browser fallback。

Answer 2

我建议使用CSS条件评论：

<!--[if lt IE 9]>

<![endif]-->

你可以专门为IE9添加一个CSS文件，只要它低于指定横幅背景颜色的CSS文件，它就会优先。