z- सूचकांक IE8 बग:

Question

के बाद यह IE8 में एक ज्ञात त्रुटि, पिछले बग यहाँ पर देखने जाता है:
http://nicolasgallagher.com/css-typography-experiment/demo/bugs.html

अब, एक सरल उदाहरण मैं इस पाया (परीक्षण के साथ एक सा खेलने यह IE8 का उपयोग कर):
http://jsfiddle.net/AjCPM/

<div id="target"> 
    <div>div</div> 
</div> 


#target { 
    position: relative; 
    width: 200px; 
    height: 200px; 
    z-index: 1; 
} 
#target>div{ 
    background: red; width: 200px; height: 200px; 
    position: relative; 
    z-index: 0; 
} 
#target:before { 
    top: 0; left: 10%; width: 100%; height: 100%; background: cyan; 
    content: "after"; 
    position: absolute; 
    z-index: 10; 
} 

IE8 सियान आयत (प्रस्तुत करता है: के बाद) लाल आयत नीचे, तब भी जब यह कम z- सूचकांक है।
और अब मुश्किल भाग:
# लक्ष्य> div से 0 से -1 और voilá के लिए z-index को बदलें! यह हल हो गया है!

तो मैंने अब बहुत सारी जेड-इंडेक्स का उपयोग करके मेरी समस्या हल की: -1;
लेकिन मुझे इससे सुरक्षित महसूस नहीं होता है।

क्या आप बेहतर समाधान जानते हैं?

मैं इसका उपयोग कर रहा हूं: छद्म बिक्री के बाद क्योंकि मेरे पास उत्पादों की एक सूची है, और मैं आइटम में एक छवि जोड़ना चाहता हूं जब उसके पास वर्ग 'बेचा' है।
मैं सर्वर में या जेएस के साथ इसके लिए एक नया HTML तत्व बना सकता हूं, लेकिन मुझे लगता है कि: सही अर्थपूर्ण समाधान के बाद।
समस्या यह है कि मैं इसके बारे में थोड़ा उलझन में हूं: स्यूडोलेमेंट के बाद अब, क्या आपको लगता है कि इससे बचने के लिए बेहतर है?

प्रत्येक उत्पाद के लिए एचटीएमएल एक बैनर "बिक" कि मुख्य छवि पर तैनात किया जा सकता है:

Answer 1

मैं इस समस्या को हल करने के लिए एक अलग तरीके का उपयोग करें। डिफ़ॉल्ट रूप से सीएसएस इस तत्व को छुपाता है। यदि रैपिंग "उत्पाद" डीआईवी में "soldOut" की एक श्रेणी होती है तो सीएसएस डिफ़ॉल्ट घोषणा को ओवरराइड करेगा और बैनर प्रदर्शित करेगा।

<div class="product soldOut">         
    ... product html ... 
    <div class="soldOutBanner"></div>  
</div> 

सीएसएस:

.soldOutBanner { 
    display:none 
} 

.soldOut .soldOutBanner { 
    display:block; 
    width:133px; 
    height:130px; 
    position:absolute; 
    top:0px; 
    right:0px; 
    z-index:10; 
    background-image:url(../SoldOut.png); 
} 

Answer 2

अपने आखिरी सवाल पहले जब तक आप किसी भी ब्राउज़र को पूरी तरह सामग्री (http://caniuse.com/#feat=css-gencontent) के लिए समर्थन की कमी का समर्थन की जरूरत नहीं है के रूप में जवाब देने के लिए है, तो आप नहीं करना चाहिए इससे बचने की जरूरत है। हालांकि, चूंकि आप ध्यान देते हैं कि यह एक ज्ञात बग है, तो आपको इसके बारे में सावधान होना चाहिए।

इस विशिष्ट उदाहरण में, मैं बग के आसपास काम करने के तीन अलग-अलग तरीकों के बारे में सोच सकता हूं। चाहे ये आपके लिए उपयोगी हों, आपके वास्तविक उपयोग मामले पर निर्भर करता है।

1. उपयोग :before के बजाय :after और निकालने के बच्चे div से स्थिति: http://jsfiddle.net/AjCPM/26/

   #target { 
       position: relative; 
       width: 200px; 
       height: 200px; 
       z-index: 1; 
   } 
   
   #target>div{ 
       position: relative; 
       background: red; 
       width: 200px; 
       height: 200px; 
       z-index: 0; 
   } 
   
   #target>div:before{ 
       content: "after"; 
       position: absolute; 
       top: 0; 
       left: 10%; 
       width: 100%; 
       height: 100%; 
       background: cyan; 
       z-index: 10; 
   } 
   

2. : http://jsfiddle.net/AjCPM/24/

   #target { 
       position: relative; 
       width: 200px; 
       height: 200px; 
       z-index: 1; 
   } 
   
   #target>div{ 
       background: red; 
       width: 200px; 
       height: 200px; 
   } 
   
   #target:after { 
       content: "after"; 
       position: absolute; 
       top: 0; 
       left: 10%; 
       width: 100%; 
       height: 100%; 
       background: cyan; 
       z-index: 10; 
   } 
   

3. बच्चे माता-पिता के बजाय div करने के बाद जोड़े एक रैपिंग तत्व का प्रयोग करें (http://jsfiddle.net/AjCPM/29/

   <div id="target"> 
       <div id="wrap"> 
        <div>div</div> 
       </div> 
   </div> 
   
   #target { 
       position: relative; 
       width: 200px; 
       height: 200px; 
       z-index: 1; 
   } 
   
   #wrap>div{ 
       position: relative; 
       background: red; 
       width: 200px; 
       height: 200px; 
       z-index: 0; 
   } 
   
   #wrap>div:before{ 
       content: "after"; 
       position: absolute; 
       top: 0; 
       left: 10%; 
       width: 100%; 
       height: 100%; 
       background: cyan; 
       z-index: 10; 
   } 
   

असल में, जब इस तरह ब्राउज़रों के बीच व्याख्या में एक अंतर के साथ सामना करना पड़ा, आपका सर्वश्रेष्ठ दांव करने के लिए अपने दृष्टिकोण को पुनर्व्यवस्थित करने की कोशिश करने के लिए है: क्योंकि आम तौर पर आपके पास पहले से) के लिए आधार स्टाइल लागू करने के लिए कुछ ऐसा खोजें जो क्रॉस-ब्राउज़र काम करता है।

Answer 3

आईई 8 में चयनकर्ताओं के बाद: पहले और: एक त्वरित नोट: उनके लिए काम करने के लिए आपको एक डॉक्टरेट घोषित करने की आवश्यकता है। this W3Schools page देखें। मुझे लगता है कि आप पहले से ही यह कर चुके हैं।

यदि आप पहले से नहीं हैं (मुझे लगता है कि आपके पास शायद) है तो उत्तर to this question देखें।

असल में, नीचे की रेखा यह है कि यह एक बग है। z-index -1 का उपयोग करने का आपका समाधान आदर्श नहीं है, लेकिन फिर फिर से बग के लिए कोई काम आदर्श नहीं होगा। मुझे नहीं लगता कि -1 के जेड-इंडेक्स का उपयोग करना बहुत अधिक चिंतित है, जब तक कि यह आपके लेआउट में समस्याएं न हो। यदि आप बहुत चिंतित हैं, तो आप केवल IE8 w/fix को लक्षित क्यों नहीं करते हैं। उदाहरण के लिए, यदि आप ऐसा तरह एक सशर्त टिप्पणी इस्तेमाल कर सकते हैं:

<!--[if IE 8]> 
<style> 
#target>div{ 
    z-index:-1; 
} 
</style> 
<![endif]--> 

व्यवहार एक आप अनुभव कर रहे जैसे कारणों कई डेवलपर्स घृणा आईई से एक है। कई मामलों में, इस सहित, कोई सही समाधान नहीं है। आप:

1. :before और :after चयनकर्ताओं & का उपयोग कर बंद कुछ है कि IE8 के अनुकूल है करने के लिए अपने HTML/सीएसएस समायोजित करें।
2. उपयोग सशर्त टिप्पणी या जावास्क्रिप्ट एक फिक्स कि विशेष रूप से IE8 लक्षित करता है जारी करने के लिए
3. हैकिंग और एक अन्य HTML/CSS कॉम्बो कि काम करता है खोजने की कोशिश रखें - लेकिन संभावना है कि यह किसी भी अधिक अपने नकारात्मक z-index समाधान की तुलना में आदर्श नहीं होगा रहे हैं ।

दुर्भाग्यवश, कई मामलों में "अर्थात् सही" क्रॉस-ब्राउज़र वेबसाइट जैसी कोई चीज़ नहीं है।

मेरे दो सेंट एक आईई 8 स्टाइलशीट बनाने और स्टाइलशीट लोड करने के लिए ऊपर प्रदर्शित सशर्त टिप्पणी का उपयोग करना है। स्टाइलशीट के भीतर, z-index: -1 समाधान का उपयोग करें जिसके साथ आप आए थे। कई वेबसाइटें आईई-लक्षित स्टाइलशीट का उपयोग करती हैं।

Answer 4

बस सुनिश्चित करें कि आप :after बजाय :before (demo) का उपयोग कर z-index तों स्थापित करने के लिए, कोई ज़रूरत नहीं:

#target { 
    position: relative; 
    width: 200px; 
    height: 200px; 
} 
#target>div{ 
    background: red; 
    width: 200px; 
    height: 200px; 
} 
#target:after { 
    content: "after"; 
    position: absolute; 
    top: 0; 
    left: 10%; 
    width: 100%; 
    height: 100%; 
    background: cyan; 
}​ 

के बाद से जनरेट की गई सामग्री #target के बाद आता है, यह स्वाभाविक रूप से ऊपर एकत्र हो जाएंगे।

BTW चाहे एक उत्पाद "बेचा" है या नहीं अर्थ जानकारी है, और इसलिए सही अर्थ समाधान नहीं बल्कि सीएसएस के माध्यम से छवि जोड़ने से, एचटीएमएल में शामिल करने के लिए होगा।