Question

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

Safari Mac OS X：
enter image description here
（左上角和白色垂直线）

Chrome Mac OS X：
enter image description here
（非常好）

Safari iOS 6.0
enter image description here
（也很好）。

现在，在这个例子中我使用border-radius: 5px 5px 0 0;，即只在顶角应用它。但是，如果我选择围绕所有角落 - 我得到了这个（在Safari for OS X中）：

enter image description here

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

修改
我应该指出这是在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;
}

Answer 2

也许那个版本的OS X正在使用某种背景属性呈现UL。它只是在黑暗中拍摄但可能在background: transparent;上尝试UL。或者，如果它将起到同样的作用，请尝试将背景颜色和border-radius移动到UL。

Answer 3

这实际上是正确的，与编写代码的方式无关，这是一个浏览器错误。

如果你放大了有这个bug的页面，你会发现渲染会在某些缩放级别上正确显示。

仍然没有找到解决此问题。

Answer 4

我无法在我的Safari版本中重现您的问题。

但是，我注意到您的HTML无效。 As per the W3C spec和the online HTML validator tool，<ul>元素必须仅包含<li>元素 immediate 后代。

您的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>

从<div class="clear"></div>移除<ul>并查看是否清除了它...

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

您可以overflow:使用<ul>强制它展开以包含其子项，这样就完全无需清算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;

OS X中的Safari - 与border-radius的怪异bug

7 个答案: