html - Safari 边界半径溢出问题

Question

我有这样的情况:http://jsfiddle.net/uqhwt1wj/

HTML:

<div class="activity_rounded">
    <img class="image" src="http://i.imgur.com/059cOzT.png?1" />
</div>

CSS:

.activity_rounded{
    width: 165px;
    height: 165px;
    border-radius: 165px;
    -moz-border-radius: 165px;
    overflow: hidden;
    margin: 0 auto;
    position: relative;
    margin-bottom: 30px;
    background: #FFDE15;
}

.image{
    max-width: 226px;
    height: auto;
    position: absolute;    
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
}

它在所有浏览器中都运行良好，但在 safari 中似乎 overflow: hidden 忽略了 block 的边界半径并仅对完整的 div block (正方形) overflow hidden 。尝试过谷歌搜索，但没有看到任何水平居中的解决方案可以在我的案例中正常工作。

任何建议、链接或评论都会有很大帮助。

Answer 1

在这种情况下，我决定使用的跨浏览器解决方案是:使用图像作为 div 的背景图像，而不是将图像元素包装在 div 中。

所以现在代码看起来像这样(DEMO):

HTML:

<div class="activity_rounded"></div>

CSS:

.activity_rounded{
    width: 165px;
    height: 165px;
    border-radius: 165px;
    -moz-border-radius: 165px;
    overflow: hidden;
    margin: 0 auto;
    position: relative;
    margin-bottom: 30px;
    background: url('http://i.imgur.com/059cOzT.png?1') no-repeat center #FFDE15;
}

希望这对任何人也有帮助。