CSS3 圓角圖像在 Safari/Chrome 中不起作用？

Question

我很高興地在這個網站上進行黑客攻擊，在 Firefox 和 Internet Explorer 9 中對其進行測試，理所當然地認為 Safari 和 Chrome 會渲染我的 CSS3，因為他們剛剛發現。

在 FF 和 IE9 中，我看到了這個：

在 Safari/Chrome 中，我看到了這個：

這是 HTML：

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

這是 CSS：

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

我究竟做錯了什么？ :(

更新
請查看我遇到的問題的工作示例： http://jsfiddle.net/jAsnU/3謝謝。

Answer 1

嘗試：

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

Answer 2

嘗試添加“溢出：隱藏；” 到 div 的樣式。 我在 jsfiddle 上做了一個快速測試頁面，它似乎可以工作（在 Chrome、Safari 和 FireFox 中測試過）： http://jsfiddle.net/wabw8/

Answer 3

您可能想嘗試在.container div img 上設置邊框半徑。

Answer 4

我認為您需要指定一個border 。

所以，像這樣：

border:1px solid blue; //無論你使用什么藍色。

看起來 FF 和 IE 給你的邊框是圓角的……但作為一個空白項，它會切斷圖像。