2010-03-30 6 views
10

मैं निम्नलिखित सीएसएस कोडमैं कैसे IE8 एक सीएसएस स्वीकार करने के लिए मिल सकता है?

.editable:before { 
    content: url(../images/icons/icon1.png); 
    padding-right:5px; 
} 

इस निम्न मार्कअप साथ संयोजन के रूप में प्रयोग किया जाता है है:

<span class="editable"></span> 

दुनिया मेरी आइकन दिखाई दे रहा है में हर दूसरे धन्य ब्राउज़र में, लेकिन IE8 के लिए लगता है इसके साथ एक समस्या है। :before छद्म-तत्व सीएसएस 2 नहीं है? content: भी एक सीएसएस 2 कमांड नहीं है? क्या देता है?

+0

मुझे आईई 8 के बारे में पता नहीं है, लेकिन: पहले और: आईई 7 और नीचे समर्थित नहीं हैं। पता नहीं है कि आखिरकार उन्होंने 8 में समर्थन जोड़ा या नहीं। अगर उन्होंने यह सुनिश्चित किया है कि पृष्ठ आईई 7 अनुकरण में प्रतिपादन नहीं कर रहा है। – prodigitalson

उत्तर

23

अद्यतन: मैं पेज पढ़ने में भूलना! आईई 8 करता समर्थन: छवियों के साथ पहले, यह सिर्फ जब यह IE7 संगतता मोड में है नहीं करता है।

IE8 सामग्री के रूप में :before, नहीं बल्कि और भी छवियों का समर्थन करता है जब संगतता मोड में नहीं। परीक्षण के लिए @toscho करने के लिए Kudos!

मैं quirksmode.org कैसे प्यार है, जो इस सामान में कम से कम आधे रास्ते को सहने के साथ काम करता है। लड़का पदक का हकदार है! आईई 8, ओपेरा और मोज़िला में

<!DOCTYPE html> 
<meta charset="UTF-8"> 
<title>Generated content with an image</title> 
<style> 
p:before 
    { 
     content: ''; 
     padding: 20px; 
     background: url("css.png") center center no-repeat; 
    } 
</style> 
<p>Test</p> 

काम करता है:

+0

आह और यदि मुझे सही याद है, तो आप इसमें HTML कोड नहीं डाल सकते हैं, इसलिए का उपयोग कर बाहर है ... – NibblyPig

+0

@ एसएलसी: इसे पाठ के रूप में प्रस्तुत किया जाता है, हां। – ANeves

6

आप निर्मित सामग्री के लिए पृष्ठभूमि के रूप में छवि का उपयोग कर सकते हैं। Live-Demo

+0

आप सही हैं! आईई 8 आईई 8 के रूप में छवियों को सामग्री के रूप में समर्थन करता है। चीयर्स, मेरा जवाब अपडेट किया गया। +1। –

24

वास्तव में आप यहाँ सावधान रहना होगा और विस्तार पढ़ना चाहिए। पूरी जानकारी के लिए this link देखते हैं - जिसमें कहा गया है

Windows इंटरनेट एक्सप्लोरर 8 में, साथ ही IE8 मानक मोड में विंडोज इंटरनेट एक्सप्लोरर के बाद के संस्करणों, के केवल एक पेट के रूप में इस छद्म तत्व में मान्यता प्राप्त है -यह है, पहले। Windows Internet Explorer 9 की शुरुआत के साथ छद्म तत्व से पहले :: हालांकि एक पेट के रूप में अभी भी मान्यता प्राप्त है, दो कोलन की आवश्यकता है और दो पेट के फार्म के लिए हूबहू व्यवहार करता है। नहीं होगा - के बाद डबल कोलन का उपयोग नहीं (:: के बाद, बस सावधान रहना:

ब्राउज़रों <IE9 के लिए मतलब - - आप :before का उपयोग करना चाहिए और >=IE9 के लिए आप ::before

+1

यह देखकर मुझे समय का गुच्छा बचाया गया, आईई 8 मेरे लिए काम नहीं कर रहा था क्योंकि मेरे पास :: –

+0

डबल कोलोन मेरी समस्या थी, सिर के लिए धन्यवाद। यह कैसे आगे संगत बनाता है? अर्थात। यदि यह IEE से बड़ा है तो IX बनाम डबल कॉलन कम होने पर एकल कोलन का उपयोग करें? – Jacques

+3

@ जैक्यूक्स एकल कोलोन आईई> = 9 में ठीक काम करेगा। तो अब सिर्फ एक कोलन (जो सीएसएस 2.1 मानक है) के साथ चिपके रहें। छद्म चयनकर्ताओं और छद्म तत्वों के लिए केवल CSS3 एकल और डबल कॉलन के बीच भिन्न होता है। –

10

का उपयोग करते समय का उपयोग करना चाहिए: पहले और काम, लेकिन: काम करने के बाद)। मैंने इसके लिए लगभग 20 मिनट खो दिए ...

+0

धन्यवाद, यह वास्तव में वह उत्तर है जिसे मैं व्यक्तिगत रूप से ढूंढ रहा था। आईई 8 अब मेरे लिए एक काम है। (बेवकूफ आईई 8!) – philtune

+0

आप महोदय, मुझे एक संभावित दिन-लंबे डीबग सत्र से बचाया क्यों यह और $ (* # काम नहीं करेगा जबकि प्रत्येक संगतता तालिका कहती है कि यह चाहिए। –

+0

लेकिन आधुनिक ब्राउज़र के लिए पहले :: उपयोग करने के लिए बेहतर नहीं है सुनिश्चित करें कि आप की तरह दोगुना हो सकते हैं: पहले, बंद :: पहले {etc ... – landed

0

यह पेक्का के शानदार उदाहरण से बाहर जा रहा है ... मेरी परियोजना पर मेरी ऊंचाई पंक्ति के लिए लंबा था ... इसलिए मैंने एक पैडिंग-तल जोड़ा: 0px;

बस मामले में आप इस में बारिश ....

.icon-spinner:before { 
    content: ''; 
    padding: 15px; 
    padding-bottom: 0px; 
    background: url("css.png") no-repeat left top; 
} 
संबंधित मुद्दे

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