萨法里边界半径溢出问题

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似乎忽略了块的边界半径，并且仅为完整div块（正方形）隐藏溢出。试图谷歌，但没有看到任何水平居中的解决方案，在我的情况下将正常工作。

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

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;
}

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