आईई 8

Question

पर बच्चे छवि के पीछे छिपे माता-पिता पर छद्म तत्व आईई 8 में, माता-पिता के बच्चों के पीछे बहने वाले पेसुडो तत्व का पृष्ठभूमि रंग क्यों है? पाठ सामने बहता है, लेकिन पृष्ठभूमि रंग नहीं है। जेड-इंडेक्स किसी की मदद नहीं कर रहा था।

मैं यह निर्धारित करने में सक्षम नहीं हूं कि यह IE8 में एक बग है या नहीं। ऐसा लगता है कि यह एक बहुत ही सामान्य उपयोग-मामला होता, लेकिन मुझे उससे संबंधित कई ब्लॉग पोस्ट या SO प्रश्न नहीं मिल सका।

http://jsfiddle.net/VAg2E/

<div id="parent"> 
     <img src="http://placehold.it/200x200"> 
    </div> 


    #parent{ padding: 20px; } 
    #parent:before{ 
     content: 'Behind the image'; 
     position: absolute; 
     top: 0; 
     left: 0; 
     width: 100px; 
     height: 100px; 
     background-color: red; 
    } 

संपादित करें: A related Stack Overflow Question about Stacking Order

Answer 1

यह निश्चित रूप से IE8 में एक बग है; चूंकि आपका :before छद्म-तत्व स्थित है, इसे एक नया स्टैकिंग संदर्भ बनाना चाहिए और हमेशा imgunless you give it a negative z-index के शीर्ष पर खींचा जाना चाहिए (फिर भी, पूरे तत्व को इसके पीछे खींचा जाना चाहिए, न केवल इसकी पृष्ठभूमि)।

यह समस्या :before और :after छद्म-तत्वों के बीच स्टैकिंग और img जैसे तत्वों को प्रतिस्थापित करने के लिए विशिष्ट प्रतीत होती है। ऐसा लगता है कि IE8 स्टैकिंग के मामले में अलग-अलग सामग्री को प्रतिस्थापित कर रहा है, लेकिन जो भी हो रहा है, यह निश्चित रूप से कल्पना के अनुरूप नहीं है।

जैसा कि आप शायद जानते हैं, यह IE9 में तय है।

Answer 2

IE8 केवल तभी <!DOCTYPE> घोषित किया जाता है pseudos का समर्थन करता है। Source

#parent { padding: 20px; z-index: 2; } 
    #parent:before { 
     content: 'Behind the image'; 
     position: absolute; 
     top: 0; 
     left: 0; 
     width: 100px; 
     height: 100px; 
     background-color: red; 
     z-index: -1; 
    }​ 

Answer 3

आपका सटीक एक ही मुद्दा है, केवल एक चीज जो आप कर सकते हैं वह सीएसएस और z-index के माध्यम से स्टैकिंग ऑर्डर को मजबूर करती है। एकमात्र पकड़ यह है कि z-index मूल तत्व से शुरू होने वाले बच्चे तत्व पर रखा गया है, इसलिए आप #parent-element {z-index: 2} और #child-element {z-index: 1} के रूप में उचित तर्क आदेश करने में सक्षम नहीं होंगे, के लिए z-index को केवल एक अलग स्टैक ऑर्डर के रूप में स्तर 1 पर सेट किया जाएगा#parent-element के अंदर।

आप अब भी z-index#child-element के लिए -1 मान के साथ सेट कर सकते हैं, यह केवल पूरे #parent-element स्टैकिंग ऑर्डर को वापस ले जाएगा।

तो संक्षिप्त करने के लिए:

#parent-element { z-index: 99;} /* or any arbitrary number fitting */ 
#child-element {z-index: -1;} 

इसके अलावा दोनों तत्वों एक position: relative/absolute स्टैकिंग क्रम z-index