ओवरफ़्लो: IE8 में css3pie का उपयोग करके गोलाकार सीमाओं के लिए छिपा हुआ है?

Question

मेरे पास यह HTML है:

<div id="micrositePhotoDiv"> 
    <img id="micrositePhoto" /> 
</div> 

और css:

#micrositePhotoDiv { 
    overflow:hidden; 
    @include border-radius(10px); 
    behavior: url(PIE.htc); 
} 

img के लिए src जावास्क्रिप्ट में प्रोग्रामेटिक रूप से सेट है।

img इसके युक्त div की चौड़ाई पर सेट है। IE9, फ़ायरफ़ॉक्स, क्रोम और इतने पर, यह छवि को सीमाओं से घिरा हुआ है (क्योंकि छवि के कोनों सीमा के बाहर हैं, और overflow:hidden; है)

IE8 में, छवि में गोलाकार सीमाएं नहीं हैं। सीमा-त्रिज्या संपत्ति प्रभावी होती है (यदि मैं border: solid black 1px; करता हूं तो मैं इसे छवि के पीछे देख सकता हूं) लेकिन सीमाओं के बाहर की छवि के हिस्सों को छुपाया नहीं जाता है।

सीएसएस, css3pie, जावास्क्रिप्ट आदि का उपयोग कर इस के आसपास कोई रास्ता है? या आईई 8 में हासिल करना संभव नहीं है?

Answer 1

border-radius दोनों के लिए लागू करें - div और img और यह काम करना चाहिए।