Las esquinas redondeadas de la imagen CSS3 no funcionan en Safari/Chrome?

He pirateado alegremente en este sitio web, probándolo en Firefox e Internet Explorer 9, dando por hecho que Safari y Chrome renderizarán mi CSS3 bien, cuando acabo de descubrir que no lo hacen.Las esquinas redondeadas de la imagen CSS3 no funcionan en Safari/Chrome?

En FF y IE9 veo esto:

enter image description here

En Safari/Chrome veo esto:

enter image description here

Aquí está el código HTML:

<div class="container"> 
    <div> 
     <img src="static/images/image1.jpg" alt="" /> 
    </div>

Aquí el CSS:

.container { 
    border-radius:10px; 
    -moz-border-radius:10px; 
    -webkit-border-radius: 10px; 
    }

¿Qué estoy haciendo mal? :(

ACTUALIZACIÓN
favor ver un ejemplo de trabajo del problema que estoy teniendo:. http://jsfiddle.net/jAsnU/3 Gracias

Fuente

2011-05-25 Chuck Le Butt

intento:

.container img { 
    border-radius:10px; 
    -moz-border-radius:10px; 
    -webkit-border-radius: 10px; 
}

Fuente

2011-05-25 19:59:18 ohmusama

Me encantaría saber los detalles de por qué funcionó, y por qué los navegadores Webkit no ocultaron el desbordamiento, pero esta fue la respuesta. ¡Gracias! –

Recientemente tuve el mismo problema. Y esta fue la única solución que funcionó para mí. Por qué funcionó? Supongo que es porque webkit en realidad no registra la redondez subyacente de los elementos primarios a los hijos. Si tuvieras un div infantil, también podría necesitar la redondez. Podrías hacer ese experimento y demostrarte esto a ti mismo. – ohmusama

creo que es necesario especificar un border

Por lo tanto, algo como esto.:

border:1px solid blue; // lo azul que está utilizando.

Parece como si FF y yo E te están dando el borde redondeado ... pero como un elemento en blanco que está cortando la imagen.

Fuente

2011-05-25 19:51:52

Trate de añadir "overflow: hidden;" al estilo de la div. Hice una página de prueba rápida en jsfiddle y parecía funcionar (lo probé en Chrome, Safari y FireFox): http://jsfiddle.net/wabw8/

Fuente

2011-05-25 19:59:19 patorjk

Aunque su JS Fiddle funciona bien, no funciona cuando lo intento en mi proyecto. ¡Muy molesto! Creo que debe tener algo que ver con el hecho de que las imágenes en realidad se están agregando más tarde mediante javascript como parte de un carrusel (http://slidesjs.com/). –

No veo en qué parte de la página se aplica border-radius (a menos que aún no lo hayas trasladado a producción). – patorjk

Aquí. Ahora puede ver: http://jsfiddle.net/jAsnU/3/ –

Es posible que desee intentar establecer el radio del borde en .container div img.

Fuente

2011-05-25 19:59:36 Dan

+1 Gracias. Tu respuesta funcionó, pero ohmusama dio una mejor. –

sí, 4 personas han respondido esta pregunta en menos de un minuto. jaja – Dan

Las esquinas redondeadas de la imagen CSS3 no funcionan en Safari/Chrome?

Respuesta

Cuestiones relacionadas