Safari 6中的CSS邊框半徑問題

我想創建一個圓角左上角和右上角的方框。我的CSS：Safari 6中的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;

這是一個WebKit的錯誤嗎？（Chrome有角落文物，但沒有其他人）
如果不是，我怎樣才能繞過左上角和右下角而不會遇到這些問題？
我使用的是2012的MacBook Air，OSX山獅（10.8），Safari瀏覽器6.0.1，Chrome瀏覽器22.0.1229.94

來源

2012-10-24 besseddrest

請注意，例如，您可以使用http://droplr.com快速託管圖像，而http://jsfiddle.net可以使用示例。 – ndm

它可能有助於使用：background-clip：padding-box; –

這裏是一個可能的答案，但你可能要處理一些事情，所以@ndm爲分享示例的方式提供了極好的建議。

爲了幫助調試正在發生的事情，我喜歡增加邊框半徑並添加彩色背景。

溢出

你可能只是有一個滿溢，覆蓋了角落的箱子裏面的內容。試試.box { overflow: hidden; }。這是一個JSFiddle，它驗證了Safari 6.0.2中的三種常見方案。

抗鋸齒

如果「神祕白線」是很微妙的，它可能僅僅是Safari的反走樣它試圖使邊框看起來更平滑。通過使邊框更加粗糙並比較外觀來檢查這一理論。

來源

2012-11-21 20:12:14 Anson

Safari 6中的CSS邊框半徑問題

回答

相關問題