Safari 边界半径溢出问题

Question

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 块（正方形）的溢出。尝试 Google 周围，但还没有看到任何水平居中的解决方案在我的情况下可以正常工作。

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

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

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

Safari 边界半径溢出问题

Saffari border radius overflow issue

html

css

safari