边境半径不适用于野生动物园？

Question

我正在创建一个WordPress主题，我有四个图像，应该显示为带边框的圆圈。

我的HMTL代码如下：

<div class="row homeCategoryImageLinks">
    <div class="columns large-3">
        <a href="#">
            <img src="http://placehold.it/195x195" />
        </a>
    </div>
    <div class="columns large-3">
        <a href="#">
            <img src="http://placehold.it/195x195" />
        </a>
    </div>
    <div class="columns large-3">
        <a href="#">
            <img src="http://placehold.it/195x195" />
        </a>
    </div>
    <div class="columns large-3">
        <a href="#">
            <img src="http://placehold.it/195x195" />
        </a>
    </div>
</div>

这是我的CSS代码：

.homeCategoryImageLinks a
{
    z-index: 3502;
    display: block;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

.homeCategoryImageLinks a img
{
    display: block;
    border: 5px solid #FFF;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.45);
    -moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.45);
    box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.45);
}

问题在于，虽然此代码在我测试的任何浏览器中都能正常工作，但在Safari中无效。

期望的结果应如下：

和Safari返回：

我该如何解决这个问题？

注意：上述代码可根据需要在每个经过测试的浏览器中使用，但不适用于Safari。 Safari Web浏览器是个例外。

注2 ：您可以在此处查看问题：http://jsfiddle.net/87EZV/1/

亲切的问候。

Answer 1

Safari使用border-radius：-webkit-border-radius acts differently from -moz-border-radius

我建议将border-radius和overflow: hidden应用于图片的父包装器。那个父母会将图像剪辑在里面。

您可能需要应用display: block或position: relative以确保浏览器接受样式。

Answer 2

尝试

.homeCategoryImageLinks a{
        display: inline-block;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        -khtml-border-radius: 50%;
        border: 5px solid #fff;
}

继承人 demo

Answer 3

  

您将得到答案CLICK HERE。   你必须按照研究员的建议使用不同的方法。

     

你必须使用这个或任何不同的方法，直到safari修复这个错误。

.class{
        display: inline-block;
        -webkit-border-radius: 50%;

}
.class img{

        border: 10px solid #ffffff;
        width:100px;/*as like if needed*/  
        height:100px;/*as like if needed*/  
}