CSS3 abgerundete Bildecken funktionieren nicht in Safari/Chrome?

Question

Ich habe fröhlich auf dieser Website herumgehackt und sie in Firefox und Internet Explorer 9 getestet, weil ich davon ausging, dass Safari und Chrome mein CSS3 gut darstellen würden, obwohl ich gerade herausgefunden habe, dass sie das nicht tun.

In FF und IE9 sehe ich dies:

In Safari/Chrome sehe ich dies:

Hier ist der HTML-Code:

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

Hier ist das CSS:

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

Was mache ich falsch? :(

アップデイト
Bitte sehen Sie sich ein funktionierendes Beispiel für das Problem an, das ich habe: http://jsfiddle.net/jAsnU/3 Danke.

Answer 1

Versuchen:

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

Answer 2

Versuchen Sie, "overflow:hidden;" zum Stil des Divs hinzuzufügen. Ich habe eine schnelle Testseite bei jsfiddle erstellt und es schien zu funktionieren (getestet in Chrome, Safari und FireFox): http://jsfiddle.net/wabw8/

Answer 3

Sie können versuchen, den Radius des Rahmens für .container div img festzulegen.

Answer 4

Ich denke, Sie müssen eine border .

Also, etwa so:

border:1px solid blue; //welches Blau Sie auch immer verwenden.

Es sieht so aus, als ob FF und IE Ihnen den abgerundeten Rand anzeigen... aber als leeres Element, das das Bild abschneidet.