क्रोम बच्चों पर सीमा त्रिज्या का सम्मान नहीं करता

Question

मुझे बाल तत्वों पर सीमा त्रिज्या का सम्मान करने के लिए क्रोम प्राप्त करने में कुछ परेशानी हो रही है।

यहाँ सेटअप है:

<div class='wrapper'> 
    <img id='sosumi' src='http://images.apple.com/safari/images/overview_hero.jpg' /> 
</div> 

अगर आवरण एक तैनात तत्व (जैसे स्थिति: रिश्तेदार) है और एक बॉर्डर-त्रिज्या, तो बॉर्डर की त्रिज्या img सामग्री के लिए लागू नहीं किया जाएगा है।

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

यहां एक संक्षिप्त उदाहरण पृष्ठ है जो समस्या को दिखाता है। सफारी, मोबाइल सफारी, फ़ायरफ़ॉक्स, या आईई में देखें और छवि के कोनों को गोल कोने में फिसल जाएगा। क्रोम में देखा गया चित्र छवि को ओवरफ्लो करता है (ओवरफ्लो के बावजूद: छुपा सीएसएस) और बदसूरत लग रहा है। https://dl.dropbox.com/u/433436/no-rounding/index.html

प्रश्न: वहाँ वह भी पागल नहीं है इस के लिए कुछ वैकल्पिक हल है

एक नज़र है? क्या किसी को पता है कि यह एक वेबकिट आधारित ब्राउज़र को क्यों प्रभावित करता है और दूसरों को नहीं? शायद यह क्रोम में जल्द ही अपडेट हो रहा है?

Answer 1

आप को हटाने की जरूरत position: relative

तो

अपने वास्तव में अपने तत्व की जरूरत सापेक्ष स्थिति तो आप डबल लपेट कर सकते हैं:

HTML:

<div class="outer"> 
    <div class="wrapper"> 
     <div class="inside"> 
     </div> 
    </div> 
</div> 

सीएसएस:

.outer { 
    position: relative; 
} 
.wrapper { 
    width: 100px; 
    height: 100px; 
    overflow: hidden; 
    border: 3px solid red; 
    border-radius: 20px; 
} 
.inside { 
    width: 100px; 
    height: 100px; 
    background-color: #333; 
} 

http://jsfiddle.net/eprRj/

इन संबंधित प्रश्नों देखें:

• Forcing child to obey parent's curved borders in CSS
• CSS Border radius not trimming image on Webkit
• How to make CSS3 rounded corners hide overflow in Chrome/Opera

Answer 2

बच्चे तत्वों को माता-पिता तत्व को दिए गए आधे में से border-radius देने का प्रयास करें।

इस उत्तर से: https://stackoverflow.com/a/5421789/187954

Answer 3

बस में जोड़ने आपकी सीमा मोटाई के आधार पर आपको त्रिज्या को समायोजित करना होगा और इसे बच्चे से बाहर ले जाना होगा। मैं भी बड़े समर्थन ब्राउज़रों -moz- आदि के लिए उपसर्गों में जोड़ना होगा ..

Answer 4

पेरेंट तत्व को display: block; या display: inline-block; जोड़ा जा रहा है इसे हल कर सकते हैं।