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

Sitepoint 的回答:

嗯，棘手。如果您将边框放在相反的位置，它会起作用:

代码:

.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，没有供应商前缀，因为现在所有浏览器都将支持它。