पृष्ठभूमि छवि IE8

कोई कारण नहीं है, पृष्ठभूमि छवि IE8 और IE9 में दिखाई नहीं दे रही है। यह आईई 10, क्रोम, और फ़ायरफ़ॉक्स में दिखाई देता है।पृष्ठभूमि छवि IE8

.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); 
}

स्रोत

2013-08-06 dmr

एकाधिक बीजी आईई द्वारा समर्थित नहीं हैं <10 – RaphaelDDL

@RaphaelDDL: आपका मतलब है कि मेरे पास पृष्ठभूमि छवि और ढाल दोनों नहीं हो सकते हैं? – dmr

नहीं। जहां तक मुझे पता है, पृष्ठभूमि छवि के रूप में एक ढाल गिनती है। यदि ब्राउज़र सीएसएस 3 एकाधिक पृष्ठभूमि का समर्थन नहीं करता है, तो यह सभी के लिए असफल हो जाएगा (अमान्य संपत्ति मान के रूप में गिना जाता है)। मुझे पता है कि आईई 9 कुछ हद तक कई बीजीएस का समर्थन करता है लेकिन यह बहुत छोटी है (ज्ञात मुद्दों पर यह http://caniuse.com/#feat=multibackgrounds देखें)। और चूंकि आईई 9 सीएसएस 3 ढाल के बारे में नहीं जानता है, इसलिए यह पूरी घोषणा को अमान्य बनाता है (http://caniuse.com/#feat=css-gradients) – RaphaelDDL

CSS3 multiple background आईई 8 और नीचे द्वारा समर्थित नहीं है:

यहाँ प्रासंगिक सीएसएस है। तो अल्पविराम से अलग पृष्ठभूमि मूल्य यह अमान्य है इस प्रकार काम नहीं करेगा।

और यह IE9 पर काम नहीं करता है, भले ही यह एकाधिक पृष्ठभूमि का समर्थन करता है (बग्गी लेकिन यह करता है) क्योंकि IE9 CSS3 Gradient का समर्थन नहीं करता है, इसलिए यह पूरी घोषणा को अमान्य बनाता है।

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

के रूप में:

मैं आप एक से अधिक पृष्ठभूमि घोषणाओं पर !important का उपयोग, लेकिन एक ही पृष्ठभूमि घोषणा के रूप में लाइन में पिछले चुना है, ताकि IE9 और नीचे बीजी के कम से कम एक प्रदर्शित कर सकते हैं सुझाव है एक और विकल्प, आप 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*/ 
}

ध्यान रखें यह केवल तभी कार्य करेगा behavior का यूआरएल एक ही डोमेन पर है। Read more।

स्रोत

2013-08-06 17:02:32 RaphaelDDL

पृष्ठभूमि छवि IE8

उत्तर

संबंधित मुद्दे