在Safari中修复边界半径？

我在这里遇到了一些问题。我似乎无法获得边界底部半径左侧和右侧在Safari上正常工作。我在3个浏览器（Chrome，Firefox和Safari）上截取了边界半径的截图。只有Safari有麻烦。在Safari中修复边界半径？

谷歌浏览器

Chrome

火狐

Firefox

Safari浏览器

Safari

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

我有点卡住，因为我不知道如何解决这个问题。顺便说一下，我正在谈论Safari 5.1.2（6534.52.7）。

2012-03-09 Propeller

什么版本的safari？ – 2012-03-09 13:00:43

我相信'120px'对于你的元素来说太大了，不是吗... – 2012-03-09 13:00:56

@AlexanderPavlov：当这个值大于允许的宽度/高度时，它会被封盖在宽度或高度上，无论哪个都允许。这可能不是问题，因为Safari通常能够处理这种情况。 – BoltClock 2012-03-09 13:02:20

看起来像一个Safari bug。由于使用大于您的元素height的border-radius而导致。

简单修复;设置border-radius以匹配元素的height。无论如何，我看不出有什么理由让它变大。

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

编辑

您可以提供比一个价值更高，以便获得不同的结果：

border-bottom-left-radius: 150px 50px;

这里有一个“宽拱形的例子“按照以下要求：http://jsfiddle.net/BpJ7v/3/

2012-03-09 13:57:26 Turnip

固定它，但它的原因是因为我想它创建一个宽拱。 – Propeller 2012-03-09 15:13:42

您可以提供多种价值来实现这一目标。看到这个例子http://jsfiddle.net/BpJ7v/3/ – Turnip 2012-03-09 15:19:10

哦。 ._。我不知道。谢谢你的提示！ – Propeller 2012-03-09 15:20:53

尝试添加

-webkit-background-clip: padding-box;

添加到具有边框半径的元素。

2012-03-09 13:58:08 james2doyle

我试过了。仍然没有去。：/ – Propeller 2012-03-09 15:07:20

回答