El Chrome no respeta el radio del borde en los niños

Question

Tengo problemas para que Chrome respete el radio del borde de los elementos secundarios.

Así es la configuración:

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

si la envoltura es un elemento posicionado (posición por ejemplo: relativa) y tiene una frontera de radio, entonces el radio frontera no se aplicará al contenido img.

tampoco tiene que ser una imagen. cualquier contenido que llena el fondo.

Aquí hay una página de ejemplo reducida que muestra el problema. Ver en Safari, Mobile Safari, Firefox o IE y las esquinas de la imagen se recortarán en la esquina redondeada. En Chrome, la imagen desborda la esquina (a pesar del desbordamiento: css oculta) y se ve fea.

echar un vistazo: https://dl.dropbox.com/u/433436/no-rounding/index.html

La pregunta: ¿Hay alguna solución para esto que no es demasiado loco? ¿Alguien sabe por qué esto afecta a un navegador basado en WebKit y no a otros? Tal vez esto se actualice pronto en Chrome?

Answer 1

Es necesario eliminar el position: relative

Si su realmente necesitará posición relativa a continuación, se puede envolver el doble de su 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/

ver estas preguntas relacionadas:

• 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

Intente darle a los elementos secundarios una border-radius de la mitad de la que se le da al elemento padre.

De esta respuesta: https://stackoverflow.com/a/5421789/187954

Answer 3

Sólo añadir en

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

Tendrá que ajustar el radio, dependiendo del grosor de su borde y quitarlo del niño. También me gustaría añadir en los prefijos de los más viejos navegadores que soporten -moz- etc ..

Answer 4

Adición display: block; o display: inline-block; al elemento padre podría resolverlo.