Safari中的CSS圆角问题？

Question

似乎CSS圆角样式在我的Stackexchange网站的某些部分（SF Answers和Phonehow.com）上起作用，而在其他部分上则不起作用。在Chrome中可以正确显示，但是在Safari中不能。我不确定这是Safari的bug还是我遗漏了什么。导航栏在所有浏览器中都使用了圆角样式，但选项卡（活动、特色、热门、本周、本月）在Safari中仍然是方形的。我让一些编码同行来检查它，但他们卡住了，所以我想在这里提问。谢谢。

以下是我的代码：

#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;

- debug

---

感谢您添加链接，Patrick。 - debug

漂亮的网站！请修复Phonehow.com的链接。顺便说一下，在Windows XP上使用Chrome浏览器滚动速度很慢（但在Safari或其他浏览器中不会）。 - Marcel Korpel

我没有做那件事，是Patrick做的。每次我试图更改它，它都会说你只能添加一个链接..请给我投票。 - debug

Answer 1

在使用-webkit-border-radius时，您只能使用一个值。目前Chrome可以处理更多的值，但Safari不能。请参考this post以获得良好的解释，或查看MDC（嗯，它没有提到Chrome）。奇怪的是我在webkit.org上找不到相关信息，但我只是进行了快速搜索。

对于Safari，请改用长格式属性（即-webkit-border-top-left-radius等）。

- Marcel Korpel