Safari / Chrome的圓角

Question

因此，我嘗試了所有人推薦的所有方法來解決此問題，這就是為什么我尋求幫助。 我遇到了一個圓角問題，它顯示的是它在Firefox上的顯示方式，而不是Safari或Chrome。 這是我的代碼：

#sidebar4_content{
    margin: 0 auto;
    float: right;
    width:80%;
    background-color: #F2F2F2;
    margin-top: 130px;
    height: 600px;
    border: solid 5px #1C1C1C;
    border-top-left-radius:90%;/*Opera 10.5, IE 9*/
    border-bottom-left-radius:90%;/*Opera 10.5, IE 9*/
    -moz-border-radius-bottomleft: 90%; /*Disabled for FF1+*/
    -moz-border-radius-topleft: 90%;/*Disabled for FF1+*/
    -webkit-border-top-left-radius: 90%;/* Saf3+, Chrome*/
    -webkit-border-bottom-left-radius: 90%;/* Saf3+, Chrome*/
}

我嘗試了各種組合，例如使用“ px”而不是“％”，以這種格式獲取所有內容：border-radius：0px 90px 90px 0px; 我也嘗試過評論，因為有人推薦了它，但沒有任何效果。 奇怪的是，即使在我指定邊的情況下，在Safari和Chrome中，邊角也是圓角的，但均為10像素和所有四個邊。 請幫助！

Answer 1

當我將其逐字粘貼到jsfiddle中時，該代碼似乎在Chrome中對我有用：

http://jsfiddle.net/VTgAn/

當我查看Chrome中的inspect元素時，它正按預期使用以下規則：

-webkit-border-top-left-radius: 90%;/* Saf3+, Chrome*/
-webkit-border-bottom-left-radius: 90%;/* Saf3+, Chrome*/

您是否可能還有其他導致沖突的CSS？ 檢查元素時看起來像什么？

Answer 2

您確定沒有什么與CSS沖突嗎？ 對我來說，當我在FF和Chrome中撥弄這個CSS時，結果完全一樣。 （ 小提琴 ）

嘗試用！important標簽強制它們，以查看它是否起作用，如果起作用，則是某些東西使您在此處顯示的css無效，並且您應該查看chrome的devmode以查看其中哪一項是最重要的。

所以：

#sidebar4_content{
margin: 0 auto;
float: right;
width:80%;
background-color: #F2F2F2;
margin-top: 130px;
height: 600px;
border: solid 5px #1C1C1C;
border-top-left-radius:90% !important;/*Opera 10.5, IE 9*/
border-bottom-left-radius:90% !important;/*Opera 10.5, IE 9*/
-moz-border-radius-bottomleft: 90% !important; /*Disabled for FF1+*/
-moz-border-radius-topleft: 90% !important;/*Disabled for FF1+*/
-webkit-border-top-left-radius: 90% !important;/* Saf3+, Chrome*/
-webkit-border-bottom-left-radius: 90% !important;/* Saf3+, Chrome*/
}

Answer 3

它適合我在Chrome和Safari上使用。 也許嘗試將其他2個角設置為0。

-webkit-border-bottom-right-radius: 0;/* Saf3+, Chrome*/
-webkit-border-top-right-radius: 0;/* Saf3+, Chrome*/