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

你必须这样做 - ＆gt; 的 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;

 }

Answer 2

尽量不要将其直接应用于<img>标记。尝试将<img>标记包装在其自己的<div>中，并使用<div>将{ - 1}}添加到边框半径。

1] 用overflow:hidden;类标记<img>标记自己的<div>标记。

imgwrapper

2] 为新的<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> CSS类添加CSS样式。

注意：我也为Firefox添加了imgwrapper。

-moz-border-radius

3] 更新旧的.product-spec .imgwrapper { width:140px; height:140px; overflow:hidden; border:2px solid #bf3c30; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px;} CSS声明。

.product-spec .img