IE 11中的多个背景

Question

我有以下内容css:

background: url(../images/clouds_bg.png) center, repeat-y -webkit-linear-gradient(#73B9FF, #FFF);
background: url(../images/clouds_bg.png) center, repeat-y linear-gradient(#73B9FF, #FFF);

我不能让这一起工作Internet Explorer 11,虽然我没有试过IE 10及以下.

Answer 1

在速记属性中提供的值的顺序通常非常重要.你知道,font需要一定的顺序,确实padding,margin,border-radius等background是没有什么不同.

Internet Explorer遵循W3C和Mozilla记录的属性顺序.这两个文档源都将速记属性顺序列为:

[ <color> || <image> || <repeat> || <attachment> || <position> ]

这意味着如果repeat存在,则必须遵循color和/或image存在任何值.在您的情况下,image存在(作为线性渐变),但不合适.Microsoft 在MSDN上自己的文档提供了相同的顺序.

这里学到的教训并不是说Internet Explorer不是很糟糕,而是我们应该始终遵循标准组织和浏览器供应商提供的示例.

演示:http://jsfiddle.net/kgAGf/2/

注意:MSDN确实说您可以"以任何顺序"提供值,但我建议您遵守规范,除非另有说明.在这种情况下,只要是值,Internet Explorer就可以使用repeat前面的内容.使用a 需要以上顺序.imageimageurl()linear-gradient