边界半径不能在safari上运行?

I am creating a WordPress theme, and I have four images, that should be displayed as circles with border.

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

My HMTL code is the following:

我的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>

and this is my CSS code:

这是我的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);
}

The problem is that, while this code work fine in any browser I have test, doesn't work in Safari.

问题是，尽管这段代码在我测试的任何浏览器中都可以正常工作，但在Safari中却不行。

The desired result should be the following:

期望的结果应如下:

and Safari return this:

和Safari返回:

How can I fix that issue ?

我如何解决这个问题?

Note : The above code work in every tested browser as desired, but not for Safari. The Safari web browser is the exception.

注意:上面的代码在每个测试过的浏览器中都能正常工作，但在Safari中不能。Safari浏览器是个例外。

Note 2 : Here you can see live the problem : http://jsfiddle.net/87EZV/1/

注意2:这里可以看到live问题:http://jsfiddle.net/87EZV/1/

Kind regards.

亲切的问候。

3 个解决方案

#1

You will get answer CLICK HERE. You have to use different approach as suggested by fellows.

你会得到答案点击这里。你必须按照研究员的建议使用不同的方法。

You have to use this or any different approach till safari fix this bug.

在safari修复这个bug之前，您必须使用这种或任何其他方法。

.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*/  
}

#2

Safari is buggy with border-radius: -webkit-border-radius acts differently from -moz-border-radius

Safari浏览器具有边界半径:-webkit-边界半径与-moz-border-radius不同

I recommend applying border-radius and overflow: hidden to a parent wrapper for the image. That parent will clip the image inside it.

我建议应用border-radius和overflow:隐藏到图像的父包装器。父元素会将图像夹在其中。

You may need to apply display: block or position: relative to ensure the browser accepts the styling.

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

#3

Try

试一试

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

Heres ur demo

这是你的演示