Css 背景图像未显示IE8

由于某些原因，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);
}

IE 8及以下版本不支持。因此，逗号分隔的背景值无效，因此将不起作用

而且它在IE9上不起作用，即使它支持多个背景（buggy，但它确实支持），因为IE9不支持，所以它再次使整个声明无效

我建议您使用

！重要信息

在多个背景声明上，但将一个背景声明作为行中的最后一个，以便IE9和下面的内容可以显示至少一个背景声明：

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 */

---

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

#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位于同一个域上时，它才会起作用

IE不支持多个bg10@RaphaelDDL：你的意思是我不能同时拥有背景图像和渐变？不。据我所知，梯度计数作为背景图像。若浏览器不支持css 3多个背景，它将全部失败（计为无效属性值）。我知道IE9在某种程度上支持多个BG，但它有很多缺陷（请查看已知问题）。由于IE9不知道css 3梯度，所以整个声明都是无效的（）