问题
It seems that the CSS -rounded corners style works on some parts of my Stackexchange site(s) - SF Answers & Phonehow.com and not on others - It displays correctly in Chrome, but not in Safari.. Im not sure if this is a Safari bug, or something I am missing. The nav bar uses the rounded corners style in all browsers, but the tabs (active,featured, hot, week, month) are still square in Safari. I had few of my fellow coders check it out, and they are stuck, so I thought I would ask the question here. Thanks
Here is my code:
#tabs a.youarehere, #tabs a:hover, .jtabs .tabsul li:hover, .jtabs .tabsul li.ui-tabs-selected {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#FFFFFF none repeat scroll 0 0;
border-color:#BBBBBB #BBBBBB #FFFFFF;
border-style:solid;
border-width:1px;
color:#264a6f;
-moz-border-radius:4px 4px 0 0;
-webkit-border-radius:4px 4px 0 0;
回答1:
You can only use one value when using -webkit-border-radius. It appears that Chrome can handle more values at the moment, but Safari can't. See this post for a good explanation or have a look at MDC (hmm, it doesn't mention Chrome). Strangely enough I couldn't find something about this on webkit.org, but I only did a quick search.
Use the long form properties instead for Safari (i.e. -webkit-border-top-left-radius et al.).
来源：https://stackoverflow.com/questions/2224386/css-rounded-corners-bug-in-safari