邊框半徑不適用於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瀏覽器？

回答

相關問題