4

我正在创建一个 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/

亲切的问候。

4

3 回答 3

2

Safari 存在以下问题border-radius：-webkit-border-radius 的行为与 -moz-border-radius 不同

我建议将border-radiusandoverflow: hidden应用于图像的父包装器。该父级将剪辑其中的图像。

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

于 2013-10-18T07:05:30.283 回答
2

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

在 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*/  
}
于 2013-10-18T08:23:33.490 回答
1

尝试

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

这是你的演示

于 2013-10-18T07:05:36.413 回答