OS X中的Safari - 與border-radius的怪異bug

Question

我在Safari for Mac OS X中遇到了一些非常奇怪的邊界半徑問題。看看這個jsFiddle： http ： //jsfiddle.net/sXxtU/1/

Safari Mac OS X：

（左上角和白色垂直線）

Chrome Mac OS X：

（非常好）

Safari iOS 6.0

（也很好）。

現在，在這個例子中我使用border-radius: 5px 5px 0 0; ，即僅將其應用於頂角。 但是，如果我選擇圍繞所有角落 - 我得到這個（在Safari for OS X中）：

這是一個已知的錯誤？ 有什么方法可以解決這個問題嗎？ 我猜這是由於一些剪輯問題，但無論我如何嘗試應用不同的修復 - 我不能讓它看起來很正確。

編輯
我應該指出這是在Safari 6.0.2中。 還沒有機會測試其他版本。

編輯2
嘗試添加border: 1px solid transparent; 它看起來好多了。 但是，如果我使用邊框顏色（如#fff），我仍會遇到一些剪裁問題（現在在右上角......？）。 仍然非常有興趣了解這里發生了什么。

編輯3
用戶Sparky指出我的HTML無效（在ul元素中有一個div元素） - 但是，我已經確認這與我遇到的問題無關。

編輯4
一直在測試Safari 6.0.2的一些舊版本的OS X，這個問題似乎只出現在10.8.2中。 很奇怪。

Answer 1

這是因為您在無序列表中插入div清除。 你的列表項應該設置為display：inline-block，你的ul可以有一個clearfix來保持它的正確高度，即使你的列表項是左浮動的。

我在6.0中然后在6.0.2中測試了這個

這是你的jsfiddle的一個分支，有一些調整。

http://jsfiddle.net/rossedman425/VTySS/1/

HTML：

<div class="container">
<div class="pill">
    <ul class="cf">
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 1</a></li>
    </ul>
</div>

CSS：

.container {
    padding: 20px;
}
.pill {
    background-color: #00a38f;
    border-radius: 5px 5px 0 0;
}
ul {
    padding: 13px;
    list-style: none;
}
li {
    float:left;
    margin-right: 20px;
    display: inline-block;
}

.cf:before,
.cf:after {
    content: " ";
    display: table;
}
.cf:after {
    clear: both;
}
.cf {
    *zoom: 1;
}

Answer 2

也許那個版本的OS X正在為UL提供某種背景屬性。 它只是在黑暗中拍攝但可能嘗試background: transparent; 在UL 。 或者，如果它將用於相同的目的，請嘗試將背景顏色和border-radius移動到UL 。

Answer 3

這實際上是正確的，與編寫代碼的方式無關，它是一個瀏覽器錯誤。

如果您放大具有此錯誤的頁面，您將看到渲染將針對某些縮放級別正確顯示。

仍然找不到解決這個問題。

Answer 4

我無法在我的Safari版本中重現您的問題。

但是，我注意到您的HTML無效。 根據W3C規范和在線HTML驗證工具 ， <ul>元素必須僅包含<li>元素作為直接后代。

您的HTML代碼無效：

<ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 1</a></li>
    <div class="clear"></div> <!-- this line is invalid HTML -->
</ul>

從<ul>刪除<div class="clear"></div> <ul> ，看看是否清除了它...

<ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 1</a></li>
</ul>

您可以在<ul>上使用overflow:強制它擴展以包含其子項，這完全消除了對清除div的需要。

ul {
    overflow: auto;
}

http://jsfiddle.net/sXxtU/7/

Answer 5

在FF20上我遇到了類似的問題，但似乎只是因為我意外地放大了頁面。 將縮放重置為0會刪除該行。

Answer 6

也許使用偶數而不是奇數可以工作：ML上的Safari 6.0.5

在我的情況下，我測試了以下內容：

border-radius: 4px; /* HAPPY */
border-radius: 5px; /* SAD */
border-radius: 6px; /* HAPPY */

這似乎是一個瀏覽器錯誤。

Answer 7

請嘗試以下操作來調整邊框半徑：

border-top-right-radius:10px;
-webkit-top-right-border-radius:10px;
border-top-left-radius:10px;
-webkit-top-left-border-radius:10px;