Safari中的CSS圆角错误？答案

【问题标题】：CSS rounded corners bug in Safari?Safari中的CSS圆角错误？
【发布时间】：2010-02-09 07:33:28
【问题描述】：

似乎 CSS 圆角样式适用于我的 Stackexchange 网站的某些部分 - SF Answers 和 Phonehow.com 而不适用于其他部分 - 它在 Chrome 中正确显示，但在 Safari 中不正确。我没有确定这是 Safari 错误，还是我遗漏的东西。导航栏在所有浏览器中都使用圆角样式，但选项卡（活动、精选、热门、周、月）在 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;

【问题讨论】：

感谢帕特里克添加链接
漂亮的网站！请修复Phonehow.com 的链接。顺便说一句，在 Windows XP 上的 Chrome 中滚动很慢（落后）（但在 Safari 或其他浏览器中则不然）。
我没有那样做，帕特里克做到了。每次我尝试更改它时，它都说您只能添加一个链接..投票给我

标签： css webkit rounded-corners

【解决方案1】：

在使用-webkit-border-radius 时，您只能使用一个值。目前看来 Chrome 可以处理更多值，但 Safari 不能。请参阅 this post 以获得很好的解释或查看 MDC（嗯，它没有提到 Chrome）。奇怪的是，我在 webkit.org 上找不到这方面的内容，但我只是快速搜索了一下。

使用 long form properties 代替 Safari（即 -webkit-border-top-left-radius 等）。

【讨论】：