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;