Immagine di sfondo non mostrata IE8

Per qualche motivo, l'immagine di sfondo non viene visualizzata in IE8 e IE9. Si presenta in IE10, Chrome e Firefox.Immagine di sfondo non mostrata IE8

Ecco il 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); 
}

fonte

2013-08-06 dmr

più bg non sono supportati da IE <10 – RaphaelDDL

@RaphaelDDL: vuoi dire che non posso avere sia un'immagine di sfondo che una sfumatura? – dmr

No. Per quanto ne so, un gradiente conta come immagine di sfondo. Se il browser non supporta gli sfondi multipli css 3, fallirà per tutti (conta come valore di proprietà non valido). So che IE9 in qualche modo supporta più bgs ma è molto bug (controlla questo http://caniuse.com/#feat=multibackgrounds a problemi noti). E poiché IE9 non conosce il gradiente css 3, rende l'intera dichiarazione non valida (http://caniuse.com/#feat=css-gradients) – RaphaelDDL

CSS3 multiple background non è supportato da IE 8 e sotto. Quindi il valore di sfondo separato da virgole non è valido quindi non funzionerà.

E non funziona su IE9, anche quando supporta più sfondi (buggy ma lo fa) perché IE9 NON supporta CSS3 Gradient quindi di nuovo rende intera dichiarazione invalida.

vi suggerisco di utilizzare !important sulle molteplici dichiarazioni di fondo, ma fare una dichiarazione unica di fondo come l'ultima della linea, in modo da IE9 e sotto possono visualizzare almeno uno dei BG di:

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

Come un'altra opzione, è possibile utilizzare CSS3Pie. Esempio:

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

Tenete a mente che funziona solo se url del behavior è sullo stesso dominio. Read more.

fonte

2013-08-06 17:02:32 RaphaelDDL

Immagine di sfondo non mostrata IE8

risposta

Problemi correlati