7

由于某种原因，IE8 和 IE9 中没有显示背景图像。它出现在 IE10、Chrome 和 Firefox 中。

这是相关的CSS：

.addCartButton 
{
    background: url('/images/cartWhite.png') 18px 11px no-repeat, -ms-linear-gradient(top,#74c163,#1d7a09);
    background: url('/images/cartWhite.png') 18px 11px no-repeat, -moz-linear-gradient(top,#74c163,#1d7a09);
    background: url('/images/cartWhite.png') 18px 11px no-repeat, -webkit-linear-gradient(top,#74c163,#1d7a09);
    background: url('/images/cartWhite.png') 18px 11px no-repeat, linear-gradient(top,#74c163,#1d7a09);
}
4

1 回答 1

10

IE 8 及更低版本不支持CSS3 多背景。所以逗号分隔的背景值是无效的，因此不起作用。

它在 IE9 上不起作用，即使它支持多个背景（有问题但确实如此），因为 IE9 不支持CSS3 Gradient所以它再次使整个声明无效。

我建议您!important在多个背景声明上使用，但将单个背景声明作为最后一行，以便 IE9 及以下版本可以显示至少一个 BG：

background: url('/images/cartWhite.png') 18px 11px no-repeat, -ms-linear-gradient(top,#74c163,#1d7a09) !important;
background: url('/images/cartWhite.png') 18px 11px no-repeat, -moz-linear-gradient(top,#74c163,#1d7a09) !important;
background: url('/images/cartWhite.png') 18px 11px no-repeat, -webkit-linear-gradient(top,#74c163,#1d7a09) !important;
background: url('/images/cartWhite.png') 18px 11px no-repeat, linear- gradient(top,#74c163,#1d7a09) !important;
background: url('/images/cartWhite.png') 18px 11px no-repeat; /* for IE9 and below */

作为另一种选择，您可以使用CSS3Pie。例子：

#myElement {
    behavior: url(http://path/to/pie/PIE.htc);
    background: url(bg-image.png) no-repeat #CCC; /*non-CSS3 browsers will use this*/
    background: url(bg-image.png) no-repeat, -webkit-gradient(linear, 0 0, 0 100%, from(#CCC) to(#EEE)); /*old webkit*/
    background: url(bg-image.png) no-repeat, -webkit-linear-gradient(#CCC, #EEE); /*new webkit*/
    background: url(bg-image.png) no-repeat, -moz-linear-gradient(#CCC, #EEE); /*gecko*/
    background: url(bg-image.png) no-repeat, -ms-linear-gradient(#CCC, #EEE); /*IE10 preview*/
    background: url(bg-image.png) no-repeat, -o-linear-gradient(#CCC, #EEE); /*opera 11.10+*/
    background: url(bg-image.png) no-repeat, linear-gradient(#CCC, #EEE); /*future CSS3 browsers*/
    -pie-background: url(bg-image.png) no-repeat, linear-gradient(#CCC, #EEE); /*PIE*/
}

请记住，它仅在 url ofbehavior位于同一域中时才有效。阅读更多。

于 2013-08-06T17:02:32.147 回答