邊框半徑在邊界的Safari中不起作用

Question

當我在帶邊框的CSS邊框半徑放置時，它不能正常工作。如果我刪除邊框，那麼它的工作很好。這個問題在Safari瀏覽器上。查看代碼和附加圖片。

HTML代碼

<div class="imgclass floatleft"> 
<a href="indoor1.php"> 
<img src="images/led/indoor1.jpg" class="img"> 
<p>Lamps & Bulbs</p></a> 
</div> 

CSS代碼

.product-spec .imgclass { width:140px; margin-bottom:45px; } 
.product-spec .imgclass p { color:#fff; text-align:center; padding-top:5px; font-size:14px; font-family:'calibri'; } 
.product-spec .img { width:140px; height:140px; border:2px solid #bf3c30; -webkit-border-radius: 100px; border-radius: 100px;} 

Answer 1

儘量不要直接將其應用於了<img>標籤。嘗試將<img>標記包裝在它自己的<div>中，並使用overflow:hidden;向<div>添加邊界半徑。

1]包裹<img>標籤它自己的<div>標籤與類imgwrapper。

<div class="imgclass floatleft"> 
<a href="indoor1.php"> 
<div class="imgwrapper"> 
    <img src="images/led/indoor1.jpg" class="img" /> 
</div> 
<p>Lamps & Bulbs</p></a> 
</div> 

2]添加CSS樣式新imgwrapper CSS類。

注意：我爲Firefox添加了-moz-border-radius。

.product-spec .imgwrapper { width:140px; height:140px; overflow:hidden; border:2px solid #bf3c30; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px;} 

3]更新舊.product-spec .img CSS聲明。

.product-spec .img {width:140px; height:140px;} 

Answer 2

你必須做這種方式 - >DEMO

我檢查它在我的Safari 5.1.7（Windows版）和它的作品。

包裝你的圖像內div給它一個class與相同width，height和border-radius爲您image。

HTML

<div class="imgclass floatleft"> 

<a href="indoor1.php"> 

<!-- our wrapper --> 
<div class='div'> 

<img src="http://www.openvms.org/images/samples/130x130.gif" class="img"> 

</div> 

<p>Lamps & Bulbs</p> 

</a> 

</div> 

CSS

.imgclass .div{ 

width:140px; 
height:140px; 
border:2px solid #bf3c30; 
border-radius: 100px; 

} 

.img { 

width:inherit; 
height:inherit; 
border-radius:100px; 

}