边框半径在 Safari 上不起作用？

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 网络浏览器是个例外。

注2：在这里您可以看到实时问题：http ://jsfiddle.net/87EZV/1/

亲切的问候。

Answer 1

您将得到答案点击这里。您必须按照同事的建议使用不同的方法。

你必须使用这个或任何不同的方法，直到 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*/  
}