css - 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 等也是如此。背景没有什么不同。

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

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

这意味着如果存在 repeat，则它必须跟在 color 和/或 image 之后(如果其中一个值存在)。在您的情况下，image 存在(作为linear-gradient)，但不合适。微软的own documentation on MSDN提供相同的顺序。

这里吸取的教训并不是 Internet Explorer 不稳定，而是我们应该始终遵循标准机构和浏览器供应商提供的示例。

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

注意:MSDN 确实说您可以“以任何顺序”提供值，但我鼓励您遵循规范，除非另有说明。在这种情况下，只要 image 是一个 url() 值，Internet Explorer 就会在 image 之前使用 repeat .使用 linear-gradient 需要上述顺序。