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*/