Hintergrundbild zeigt IE8 nicht

Aus irgendeinem Grund wird das Hintergrundbild nicht in IE8 und IE9 angezeigt. Es zeigt sich in IE10, Chrome und Firefox. HierHintergrundbild zeigt IE8 nicht

ist die entsprechende 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); 
}

Quelle

2013-08-06 dmr

mehrere bgs werden nicht von IE unterstützt <10 – RaphaelDDL

@RaphaelDDL: Sie meinen, ich kann nicht sowohl ein Hintergrundbild und Farbverlauf haben? – dmr

Nein. Soweit ich weiß, zählt ein Farbverlauf als Hintergrundbild. Wenn der Browser keine css 3-Mehrfachhintergründe unterstützt, wird er für alle fehlschlagen (als ungültiger Eigenschaftswert zählen). Ich weiß, IE9 unterstützt etwas mehrfachen bgs, aber es ist viel buggy (überprüfen Sie diese http://caniuse.com/#feat=multibackgrounds bei bekannten Problemen). Und da IE9 nicht über Gradienten von css 3 Bescheid weiß, wird die gesamte Deklaration ungültig (http://caniuse.com/#feat=css-gradients). – RaphaelDDL

CSS3 multiple background wird nicht von IE unterstützt 8 und unten. Also der Komma separierte Hintergrundwert ist ungültig und funktioniert nicht.

Und es funktioniert nicht auf IE9, auch wenn es mehrere Hintergründe unterstützt (Buggy aber es tut), weil IE9 CSS3 Gradient nicht unterstützt, so dass es wiederum die gesamte Deklaration ungültig macht.

Ich schlage vor, Sie !important auf den mehreren Hintergrund Erklärungen verwenden, sondern eine einzige Hintergrund Erklärung als letzte in der Reihe machen, so IE9 und unter mindestens einer der BG angezeigt werden kann:

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

Wie eine andere Option, könnten Sie CSS3Pie verwenden. Beispiel:

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

Denken Sie daran, es wird nur funktionieren, wenn url von behavior auf der gleichen Domäne ist. Read more.

Quelle

2013-08-06 17:02:32 RaphaelDDL

Antwort

Verwandte Themen