Safari 6中的CSS border-radius问题

Question

我想要创建一个左上角和右上角为圆形的框。我的CSS：

border-radius: 4px 4px 0 0;

在Safari 6中，border-radius会产生一些失真/瑕疵。角落是“粗糙的”，并且出现神秘的垂直白线（方框bg为蓝色）。

我已经尝试了所有东西（-webkit-border-radius，border-top-left-radius，border-top-right-radius，border-style：none，border-width：0，border-color：transparent，等）但这似乎是唯一不会破坏的东西：

border-radius: 4px;

1. 这是一个webkit错误吗？ （Chrome有角落文物，但没有 其他）
2. 如果没有，我怎样才能绕过左上角和右上角而不会遇到这些问题？
3. 我使用的是2012 MacBook Air，OSX Mountain Lion（10.8），Safari 6.0.1，Chrome 22.0.1229.94

Answer 1

这是一个可能的答案，但你可能会处理很多事情，所以@ndm提出了一个很好的建议来分享一个例子。

为了帮助调试正在进行的操作，我喜欢增加边框半径并添加彩色背景。

<强>溢出

你可能只是在框内溢出并覆盖了角落。试试.box { overflow: hidden; }。这是一个JSFiddle，用于验证在Safari 6.0.2中使用的三种常见方案。

<强>抗锯齿

如果“神秘的白线”非常微妙，它可能只是Safari的抗锯齿，试图使边框看起来更平滑。通过使边框更粗并比较外观来检查这一理论。