इंटरनेट एक्सप्लोरर में बॉक्स छाया Ghosting 9

Question

जब इंटरनेट एक्सप्लोरर पर एक बॉक्स छाया का उपयोग करने की कोशिश कर रहा कुछ ghosting, artifacting, या सिर्फ सामान्य wonkiness का सामना कर रहा 9.

लक्ष्य पाठ क्षेत्रों के एक समूह है, कि ध्यान केंद्रित करते समय, एक बॉक्स छाया के साथ हाइलाइट किया जाएगा। यह सबसे ब्राउज़रों में बिना किसी समस्या के काम कर रहा है, लेकिन जब IE9 में तत्वों को दोहराते रहते हैं, मैं निम्नलिखित व्यवहार देखें:

उपरोक्त उदाहरण में, तीसरे पाठ क्षेत्र दूसरे पाठ क्षेत्र के लिए ध्यान केंद्रित खो देता है। बॉक्स छाया के बाएं और दाएं किनारे तीसरे पाठ क्षेत्र पर गायब नहीं होते हैं और दूसरे पर दिखाई नहीं देते हैं।

पुन: उत्पन्न करने के लिए कोड नीचे दिया गया है। दूसरा और तीसरा पाठ क्षेत्र के बीच फ़ोकस स्विच करते समय समस्या प्रकट होती है।

एचटीएमएल

<label>Text Area 1:</label> 
<textarea class="sampleClass"></textarea><br /><br /> 
<label>Text Area 2:</label> 
<textarea class="sampleClass"></textarea><br /><br /> 
<label>Text Area 3:</label> 
<textarea class="sampleClass"></textarea><br /><br /> 

सीएसएस

.sampleClass 
{ 
    border:1px solid #ccc; 
} 

.sampleClass:focus 
{ 
    box-shadow: 0px 0px 12px rgba(255,0,0,.8); 
} 

कोड भी here देखा जा सकता है।

यहां वास्तव में क्या चल रहा है?

Answer 1

मेरे पास एक टिप है ... कई मामलों में हम पीआईई का उपयोग कर सकते हैं!

http://css3pie.com/

यह "बनाता है इंटरनेट एक्सप्लोरर 6-9 सबसे अधिक उपयोगी CSS3 सजावट सुविधाओं के कई प्रतिपादन करने में सक्षम।"

इससे मुझे बहुत मदद मिली!