在OS X中的Safari浏览器 - border-radius存在奇怪的bug

Question

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

（左上角和白色竖线） Chrome Mac OS X:

（完全正常） Safari iOS 6.0

（同样完全正常）。

现在，在这个例子中，我使用了border-radius: 5px 5px 0 0;，即只在顶部圆角应用它。然而，如果我选择将所有角都变圆 - 我会得到这个结果（在Mac 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中。非常奇怪。

- Marcus Olsson

---

你使用哪个版本的Safari？ - Marcus Olsson

使用Safari 6.0.2和10.8.2时出现奇怪的边框;)但是，如果我在.pill中添加{float：left;}，它会好得多。如果元素的宽度小于220px，则可以;) - algorhythm

在Safari 6.0.2和10.8.2上表现良好。 - PhearOfRayne

好的，如果我添加 border: 1px solid transparent;，它似乎工作得更好了 - 尽管仍然存在一些剪切问题（在右上角似乎有）。 - Marcus Olsson

在Safari 6.0.2和10.7.5上看起来很好。 - f055

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;
}

- Ross Edman

---

在看完以上所有评论后，我想知道这是否与10.8.2有关。我使用的是10.7.5，在这方面没有任何问题。 - Ross Edman

我同意这可能与清除浮动有关。你应该在块级元素上使用它。display: block; 针对那个 ul。在这种情况下，我建议使用 overflow: hidden; 替代 clear-fix。这将强制其扩展。我还会考虑在这些元素上使用 position: relative;。老实说，我使用 *{position: relative;} ::: 另外，.group 或 .clear 对于你的清除浮动来说是更加美观和立即理解的名称。 - sheriffderek

Answer 2

这实际上是真的，与代码编写方式无关，而是浏览器的一个bug。

如果你放大具有此bug的页面，你会发现在某些缩放级别下渲染将会正确显示。

仍然没有找到解决方法。

- user2035610

Answer 3

也许使用偶数而不是奇数会起作用：Safari 6.0.5 on ML

在我的情况下，我测试了以下内容：

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

这似乎是浏览器的一个bug。

- user2533713

---

谢谢，这对我有用（在ML上也适用于Safari 6.0.5）。通常情况下，任何border-radius都可以正常工作，但当元素还具有transition时，我发现它会出现类似锯齿的效果。因此，我将我的border-radius从3px更改为4px，并且它按预期工作！ - user1274763

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>
    <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/

- Sparky

---

感谢您对溢出的输入。然而，这仍然无法解决10.8.2中的剪切问题。 - Marcus Olsson

Answer 5

我曾经遇到过类似的问题，在FF20上，但似乎只有我不小心放大了页面。将缩放重置为0即可删除该行。

- Fellow Stranger

---

鉴于整个问题只涉及Safari而非Firefox的问题，我不太确定这个答案是否对问题有任何帮助。 - BoltClock

Answer 6

也许这个版本的OS X正在使用某种背景属性来渲染UL。虽然只是猜测，但或许尝试在UL上使用background: transparent;。或者，如果达到相同目的，可以将背景颜色和边框半径移动到UL。

- WordPress Mike

Answer 7

尝试使用以下方法调整边框半径:

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

- Ale Galliard

---

这并没有回答问题。 - Noah Witherspoon