html - OS X 中的 Safari – border-radius 的奇怪错误

Question

我在 Mac OS X 的 Safari 中遇到了一些非常奇怪的边框半径问题。看看这个 jsFiddle:http://jsfiddle.net/sXxtU/1/

Mac OS X 浏览器:

(左上角，和白色垂直线)

Chrome Mac OS X:

(非常好)

iOS 6.0 浏览器

(也很好)。

现在，在这个例子中，我使用了 border-radius: 5px 5px 0 0;，即只将它应用在顶 Angular 。但是，如果我选择圆化所有的 Angular 落——我会得到这个(在 OS X 的 Safari 中):

这是一个已知错误吗？有什么办法可以解决这个问题吗？我猜这是由于一些剪裁问题造成的，但无论我如何尝试应用不同的修复 – 我都无法让它看起来完全正确。

编辑
我应该指出这是在 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 clear。您的列表项应设置为 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;
}