爲什麼border-radius：200px在Safari 5/6中不是圓形？

我用邊界半徑：200至使圖像是一個圓形，它工作正常IE10中，鉻，火狐，但它不是在Safari 5和Safari瀏覽器競爭圈6爲什麼border-radius：200px在Safari 5/6中不是圓形？

我的CSS代碼：

.team-member img { 
    display: block; 
    width:50%; 
    height:auto; 
    margin: 0 auto 20px; 
    border: 4px solid #ccc; 
    -webkit-border-radius: 200px; 
    -khtml-border-radius: 200px; 
    -moz-border-radius: 200px; 
    border-radius: 200px; 
}

當我刪除邊界：3px的固體#CCC，它工作在Safari上很好，但我需要保持邊界的圖像，如何解決這個問題的身邊？謝謝！！！

演示是在這裏：http://jsfiddle.net/badjohnny/kyfha/

來源

2013-06-22 BadJohnny

它在Opera 12.15上也能正常工作。我沒有Safari，但是，您是否嘗試過沒有任何前綴的「border-radius」？ – Termis

是的，但它在safari上的工作也不是很好。 – BadJohnny

我可以證實這種行爲。看起來4px邊框只能水平和垂直應用，圓形部分沒有邊框，Safari瀏覽器問題？ – BackSlash

我的印象是，這是在Safari與直接使用border-radius在圖像上的錯誤;它實際上是把它變成一個圓圈，它不會讓邊界繞着圓的邊緣而是被它切斷。我發現了一項可能不理想的工作，但它可能適用於您。相反，基本上將border和border-radius應用於父代。這裏有一個例子：http://jsfiddle.net/kyfha/4/

而CSS：

.team-member { 
    width: 200px; 
    height: 200px; 
    border: 4px solid #ccc; 
    -webkit-border-radius: 200px; 
    -khtml-border-radius: 200px; 
    -moz-border-radius: 200px; 
    border-radius: 200px; 
    overflow: hidden; 
    margin: 20px auto; 
} 

.team-member img { 
    display: block; 
    width:100%; 
    height:auto; 
}

來源

2013-06-22 18:46:26

但是，謝謝，我檢查了safari，它仍然不太好。 – BadJohnny

真的嗎？適用於我：https://dl.dropboxusercontent.com/u/357738/safari_circle.png您使用的是什麼版本的Safari？我在Mac OS X 10.8.4上使用6.0.5。 –

我正在使用Safari 5 – BadJohnny

-1

根據您的截圖：http://d.pr/i/Z3E3 - 嘗試使圖像越大，它看起來像它尚未觸及的200像素的全寬度和高度。

編輯：我對沒有解決邊界問題表示歉意。

我可能會建議如下：http://jsfiddle.net/jgagne/HPjzt/7/

CSS：

 


    .team-member { 
     display: block; 
     position: relative; 
     width: 50%; 
     height: 0; 
     padding: 0 0 50%; 
     border: 4px solid #999; 
     -moz-border-radius: 50%; 
     -webkit-border-radius: 50%; 
     border-radius: 50%; 
     overflow: hidden; 
    } 

    .team-member img { 
     display: block; 
     position: absolute; 
     top: 0; right: 0; 
     bottom: 0; left: 0; 
     width: 100%; 
     margin: auto; 
    }

更新： CSS解決了Safari 5的（在Safari 5.1.7及以上測試）。

 


    .team-member { 
     width: 50%; 
     height: 0; 
     padding: 0 0 50%; 
     border: 4px solid #999; 
     -moz-border-radius: 50%; 
     -webkit-border-radius: 50%; 
     border-radius: 50%; 
    } 

    .team-member img { 
     display: block; 
     width: 100%; 
     -moz-border-radius: 50%; 
     -webkit-border-radius: 50%; 
     border-radius: 50%; 
    }

來源

2013-06-22 19:22:58 dva

不，根據他的屏幕截圖，你可以看到邊框只適用於水平和垂直方向，圓角部分沒有邊框 – BackSlash

我試過了，但沒有改變。只有當我刪除圖像的4px邊框時，它才能正常工作。 – BadJohnny

你的編輯不適用於safari，這就是我得到的：http://d.pr/i/C2U8 – BackSlash

看來，這是一個Safari瀏覽器的bug，並且似乎只有這樣，才能做到這一點是通過造型的IMG本身帶有圓角半徑，去掉外層div的4PX邊境和「模擬」吧與邊距：

CSS：

.team-member { 
    width: 204px; 
    height: 204px; 
    -webkit-border-radius: 200px; 
    -khtml-border-radius: 200px; 
    -moz-border-radius: 200px; 
    border-radius: 200px; 
    overflow: hidden; 
    margin: 20px auto; 
    background-color: #ccc; 
} 

.team-member img { 
    display: block; 
    width:94%; 
    margin:3%; 
    height:auto; 
    -webkit-border-radius: 100%; 
    -khtml-border-radius: 100%; 
    -moz-border-radius: 100%; 
}

HTML：

<div class="team-member"> 
    <img src="http://1.s3.envato.com/files/59524429/logo-s.png" alt="Johnny"> 
</div>

JSFiddle

測試在Opera，Safari瀏覽器，Chrome和Firefox，它爲我工作。

（未在IE10上測試過，但它也可以工作）

來源

2013-06-22 19:52:12 BackSlash

謝謝！它工作正常！ – BadJohnny

爲什麼border-radius：200px在Safari 5/6中不是圓形？

回答

相關問題