背景画像にIE8が表示されない

Question

何らかの理由で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); 
} 

Answer 1

CSS3 multiple backgroundは、以下のIE 8でサポートされていません。コンマで区切られたバックグラウンド値が無効なので、無効になります。

IE9がCSS3 Gradientをサポートしていないので、複数の背景をサポートしていても（バグはありますが）IE9では機能しません。

私はあなたが複数の背景の宣言に!importantを使用しますが、BGのの少なくとも一方を表示することができ、以下の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 */ 

---

ように別のオプションでは、CSS3Pieを使用できます。例：behaviorのURLが同じドメイン上にある場合

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

は覚えておいてください、それだけで動作します。​​。