CSS 背景图片不显示 IE8
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18086034/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Background image not showing IE8
提问by dmr
For some reason, the background image is not showing up in IE8 and IE9. It shows up in IE10, Chrome, and Firefox.
出于某种原因，背景图像没有显示在 IE8 和 IE9 中。它出现在 IE10、Chrome 和 Firefox 中。
Here is the relevant CSS:
这是相关的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);
}
回答by RaphaelDDL
CSS3 multiple backgroundisn't supported by IE 8 and below. So the comma separated background value it's invalid thus will not work.
IE 8 及更低版本不支持CSS3 多重背景。所以逗号分隔的背景值是无效的，因此将不起作用。
And it does not work on IE9, even when it support multiple backgrounds (buggy but it does) because IE9 does NOT support CSS3 Gradientso again it makes entire declaration invalid.
并且它在 IE9 上不起作用，即使它支持多个背景（错误但确实如此），因为 IE9 不支持CSS3 渐变，因此它再次使整个声明无效。
I suggest you use !importanton the multiple background declarations but make a single background declaration as last in the line, so IE9 and below can display at least one of the BG's:
我建议您!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 */
As another option, you could use CSS3Pie. Example:
作为另一种选择，您可以使用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*/
}
Keep in mind it will only work if url of behavioris on the same domain. Read more.
请记住，它仅在 urlbehavior位于同一域中时才有效。阅读更多。
