Gli angoli delle immagini arrotondati CSS3 non funzionano in Safari/Chrome?

Mi sono divertito a hackerare questo sito Web, testandolo in Firefox e Internet Explorer 9, dando per scontato che Safari e Chrome possano rendere il mio CSS3 bene, quando ho appena scoperto che non lo fanno.Gli angoli delle immagini arrotondati CSS3 non funzionano in Safari/Chrome?

In FF e IE9 vedo questo:

enter image description here

In Safari/Chrome vedo questo:

enter image description here

Ecco il codice HTML:

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

Ecco il CSS:

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

Che cosa sto facendo di sbagliato? :(

UPDATE
Si prega di consultare un esempio di lavoro del problema che sto avendo. http://jsfiddle.net/jAsnU/3 Grazie

fonte

2011-05-25 Chuck Le Butt

prova:

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

fonte

2011-05-25 19:59:18 ohmusama

Mi piacerebbe conoscere le specifiche del perché che ha funzionato, e perché i browser Webkit non ha nascosto il troppo pieno, ma questa è stata la risposta. Grazie! –

Recentemente ho avuto lo stesso problema. E questa era l'unica soluzione che ha funzionato per me. Perché ha funzionato? Presumo perché il webkit non registra effettivamente la rotondità degli elementi genitoriali sottostanti ai bambini. Se avevi un div bambino, potrebbe anche essere necessario arrotondare. Potresti fare quell'esperimento e dimostrarlo a te stesso. – ohmusama

penso che è necessario specificare un border

Quindi, qualcosa di simile.:

border:1px solid blue; // qualunque blu che si sta utilizzando.

sembra che FF e io E ti sta dando il bordo arrotondato ... ma come un oggetto bianco che sta tagliando l'immagine.

fonte

2011-05-25 19:51:52

Prova ad aggiungere "overflow: hidden;" allo stile del div. Ho fatto una rapida pagina di test su jsfiddle e sembrava funzionare (testato su Chrome, Safari e FireFox): http://jsfiddle.net/wabw8/

fonte

2011-05-25 19:59:19 patorjk

Mentre il tuo JS Fiddle funziona bene, non funziona quando lo provo sul mio progetto. Molto noioso! Penso che debba avere qualcosa a che fare con il fatto che le immagini vengono effettivamente aggiunte in seguito da javascript come parte di un carosello (http://slidesjs.com/). –

Non vedo dove viene applicato il raggio di confine (a meno che non lo abbiate ancora spostato in produzione). – patorjk

Qui. Puoi vedere ora: http://jsfiddle.net/jAsnU/3/ –

Si potrebbe voler provare a impostare il raggio del bordo su .container div img.

fonte

2011-05-25 19:59:36 Dan

+1 Grazie. La tua risposta ha funzionato, ma ohmusama ne ha dato uno migliore. –

sì, 4 persone hanno postato una risposta a questa domanda in meno di un minuto! haha – Dan

Gli angoli delle immagini arrotondati CSS3 non funzionano in Safari/Chrome?

risposta

Problemi correlati