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，所以我guessin有什麼用它做的，但我希望它像這樣它看起來不夠體面在不支持邊界半徑的舊版瀏覽器中。

這可能很簡單，但我仍然堅持這一點。

謝謝。 Al。

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; 
} 

你可以只使用邊界半徑現在，沒有供應商前綴，因爲這是現在要支持所有的瀏覽器，如果你把邊框上，而不是它的工作原理。