边框半径在边界的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; 

}