OS X中的Safari - 与border-radius的怪异bug

Question

我在Safari for Mac OS X中遇到了一些非常奇怪的边界半径问题.看看这个jsFiddle:http://jsfiddle.net/sXxtU/1/

Safari Mac OS X:

(左上角和白色垂直线)

Chrome Mac OS X:

(非常好)

Safari iOS 6.0

(也很好).

现在,在这个例子中我正在使用border-radius: 5px 5px 0 0;,即只在顶角应用它.但是,如果我选择围绕所有角落 - 我得到这个(在Safari for OS X中):

这是一个已知的错误？有什么方法可以解决这个问题吗？我猜这是由于一些剪辑问题,但无论我如何尝试应用不同的修复 - 我不能让它看起来很正确.

编辑
我应该指出这是在Safari 6.0.2中.还没有机会测试其他版本.

编辑2
尝试添加border: 1px solid transparent;,它看起来好多了.但是,如果我使用边框颜色(如#fff),我仍会遇到一些剪裁问题(现在在右上角......？).仍然非常有兴趣了解这里发生了什么.

编辑3
用户Sparky指出我的HTML无效(在ul元素中有一个div元素) - 但是,我已经确认这与我遇到的问题无关.

编辑4
一直在测试Safari 6.0.2一些旧版本的OS X,这个问题似乎只出现在10.8.2中.很奇怪.

Answer 1

尝试以下方法调整边框半径：

border-top-right-radius:10px;
-webkit-top-right-border-radius:10px;
border-top-left-radius:10px;
-webkit-top-left-border-radius:10px;