Chrome non rispettando il raggio di confine sui bambini

Question

Ho un po 'di problemi a convincere Chrome a rispettare il raggio di confine sugli elementi figlio.

Ecco la configurazione:

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

se l'involucro è un elemento posizionato (posizione esempio: relativa) e ha un bordo-radius, allora il raggio confine non verrà applicato al contenuto img.

non deve essere un'immagine, sia. qualsiasi contenuto che riempie lo sfondo.

Ecco una pagina di esempio ridotta che mostra il problema. Visualizza in Safari, Safari mobile, Firefox o IE e gli angoli dell'immagine verranno ritagliati nell'angolo rotondo. Visto in Chrome l'immagine sfiora l'angolo (nonostante l'overflow: css nascosto) e sembra brutto.

dare un'occhiata: https://dl.dropbox.com/u/433436/no-rounding/index.html

La domanda: C'è qualche soluzione per questo che non è troppo folle? Qualcuno sa perché questo riguarda un browser basato su WebKit e non altri? Forse verrà presto aggiornato in Chrome?

Answer 1

È necessario rimuovere il position: relative

Se il davvero bisogno posizione relativa allora si può dell'involucro del doppio del vostro elemento:

HTML:

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

CSS:

.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/

Vedi queste domande correlati:

• 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

provare a dare gli elementi figlio di un border-radius di metà di quella data per l'elemento principale.

Da questa risposta: https://stackoverflow.com/a/5421789/187954

Answer 3

Basta aggiungere a

 
    .wrapper:first-child{ 
    border-radius:20px; 
    } 

Dovrai regolare il raggio a seconda dello spessore del bordo e togliere questo al bambino. Vorrei anche aggiungere prefissi per i browser più vecchi di supporto -moz- ecc ..

Answer 4

Aggiunta display: block; o display: inline-block; all'elemento genitore potrebbe risolverlo.