safari - Safari中的边框半径切割/图像重叠

Question

我查看了其他一些问题和答案，但仍然无法在 Safari (v 5.1.7) 中使用。

这是我的代码 - jsfiddle

.services   {
    width: 218px;
    float: left;
    margin-right: 29px;
}
.services img   {
    border: solid 8px #ccc;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}
.services a img:hover   {
    border: solid 8px #333;
    -o-transition: all 1s ease 0s;
    -ms-transition: all 1s ease 0s;
    -moz-transition: all 1s ease 0s;
    -webkit-transition: all 1s ease 0s;
    transition: all 1s ease 0s;
}

图像是正方形的 218px x 218px，所以我猜这与它有关，但我希望它是这样的，所以它在不支持边框半径的旧浏览器中看起来足够好。

这可能很简单，但我仍然坚持这一点。

谢谢。铝。

Answer 1

来自站点点的回答：

嗯，棘手。如果你把边框放在上面，它会起作用：

代码：

.services   {
    width: 218px;
    float: left;
    margin-right: 29px;
}

.services img   {
    vertical-align: top;
}

.services img, .services a   {
    border-radius: 50%;
}

.services a {
    border: 8px solid #ccc;
    display: inline-block;
}

.services a:hover   {
    border: 8px solid #333;
    -o-transition: all 1s ease 0s;
    -ms-transition: all 1s ease 0s;
    -moz-transition: all 1s ease 0s;
    -webkit-transition: all 1s ease 0s;
    transition: all 1s ease 0s;
}

您现在可以只使用border-radius，而无需使用供应商前缀，因为所有浏览器现在都将支持它。