在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

回答