边框半径不适用于Safari浏览器？

我正在创建一个WordPress主题，我有四个图像，应该显示为带有边框的圆形。边框半径不适用于Safari浏览器？

我的HMTL代码如下：

<div class="row homeCategoryImageLinks"> 
    <div class="columns large-3"> 
     <a href="#"> 
      <img src="http://placehold.it/195x195" /> 
     </a> 
    </div> 
    <div class="columns large-3"> 
     <a href="#"> 
      <img src="http://placehold.it/195x195" /> 
     </a> 
    </div> 
    <div class="columns large-3"> 
     <a href="#"> 
      <img src="http://placehold.it/195x195" /> 
     </a> 
    </div> 
    <div class="columns large-3"> 
     <a href="#"> 
      <img src="http://placehold.it/195x195" /> 
     </a> 
    </div> 
</div>

，这是我的CSS代码：

.homeCategoryImageLinks a 
{ 
    z-index: 3502; 
    display: block; 
    -webkit-border-radius: 50%; 
    -moz-border-radius: 50%; 
    border-radius: 50%; 
} 

.homeCategoryImageLinks a img 
{ 
    display: block; 
    border: 5px solid #FFF; 
    -webkit-border-radius: 50%; 
    -moz-border-radius: 50%; 
    border-radius: 50%; 
    -webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.45); 
    -moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.45); 
    box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.45); 
}

的问题是，虽然在任何浏览器我有测试此代码做工精细，没有按在Safari上不工作。

期望的结果应该是以下几点：

enter image description here

和Safari浏览器返回此：

enter image description here

我该如何解决这个问题？

注意：上面的代码在所有测试的浏览器中都能正常工作，但不适用于Safari。 Safari浏览器是例外。

注2：在这里你可以看到生活的问题：http://jsfiddle.net/87EZV/1/

亲切的问候。

来源

2013-10-18 Merianos Nikos

http://jsfiddle.net/87EZV/2/，显示'直列block'与'margin'，而不是'边境width'的伎俩。但是，我不知道这种行为的原因。 – Abhitalks

你会在这里得到答案。 http://stackoverflow.com/questions/10094778/webkit-border-radius-acts-differently-from-moz-border-radius 你必须使用不同的方法建议由研究员 – 2013-10-18 07:18:04

@wikijames您的评论是非常有用的！如果你喜欢张贴为答复upvote你。谢谢... –

你将得到一个回答CLICK HERE。你必须使用不同的方法建议由研究员。

你必须使用这个或任何不同的方法，直到safari修复这个错误。

.class{ 
     display: inline-block; 
     -webkit-border-radius: 50%; 

} 
.class img{ 

     border: 10px solid #ffffff; 
     width:100px;/*as like if needed*/ 
     height:100px;/*as like if needed*/ 
}

来源

2013-10-18 08:23:33

感谢您的回复... –

欢迎您:) – 2013-10-18 08:58:46

Safari是车用border-radius：-webkit-border-radius acts differently from -moz-border-radius

我建议应用border-radius和overflow: hidden为图像的父包装。该父母会将其中的图像剪下。

您可能需要应用display: block或position: relative以确保浏览器接受样式。

来源

2013-10-18 07:05:30 Jared

尝试

.homeCategoryImageLinks a{ 
     display: inline-block; 
     -webkit-border-radius: 50%; 
     -moz-border-radius: 50%; 
     border-radius: 50%; 
     -khtml-border-radius: 50%; 
     border: 5px solid #fff; 
}

继承人乌尔demo

来源

2013-10-18 07:05:36

边框半径不适用于Safari浏览器？

回答

相关问题