修复Safari中的边界半径？

Question

我在这里遇到了一些问题。我似乎无法在Safari上正确地使用left-bottom-radius-left和right。我在3个浏览器（Chrome，Firefox和Safari）上截取了边框半径的屏幕截图。只有Safari遇到了麻烦。

---

Google Chrome

---

火狐

---

Safari浏览器

---

从那里，你几乎可以说出问题所在。我使用了border-bottom-left-radius: 120px;和border-bottom-right-radius: 20px;。但是，两个顶部半径属性似乎工作正常。

我有点卡住，因为我不确定如何解决这个问题。顺便说一句，我在谈论Safari版本5.1.2（6534.52.7）。

Answer 1

对我来说，这似乎是一个Safari漏洞。使用大于元素border-radius的{​​{1}}导致。

轻松修复;设置height以匹配元素border-radius。无论如何，我无法看到让它更大的理由。

如果出于某种原因需要一个例子：http://jsfiddle.net/zejQX/

修改

您可以提供多个值以获得不同的结果：

height

这是一个带有＆＃34;宽拱的示例＆＃34;如下所述：http://jsfiddle.net/BpJ7v/3/

Answer 2

尝试添加

-webkit-background-clip: padding-box;

到具有边框半径的元素。

请参阅http://goo.gl/ywAa1