11

我在 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;，即仅将其应用于顶角。但是，如果我选择绕过所有角落——我会得到这个（在 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 中。很奇怪。

4

7 回答 7

1

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

如果您放大存在此错误的页面，您将看到渲染将正确显示某些缩放级别。

仍然找不到解决此问题的方法。

于 2013-02-02T16:57:47.177 回答
1

发生这种情况是因为您在无序列表中插入了一个 div clear 。您的列表项应设置为 display: inline-block 并且您的 ul 可以对其进行清除修复以保持其适当的高度，即使您的列表项向左浮动。

我在 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;
}
于 2012-12-22T06:20:47.640 回答
1

也许那个版本的 OS X 正在渲染UL具有某种背景属性的 。它只是在黑暗中拍摄，但也许可以尝试background: transparent;一下UL。或者，如果它可以达到相同的目的，请尝试将背景颜色和边框半径移动到UL.

于 2013-01-07T03:11:39.787 回答
0

我无法在我的 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>

<div class="clear"></div>从中删除<ul>，看看是否可以清除它...

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

您可以使用overflow:on<ul>来强制它扩展以包含其子项，这完全消除了对 clearing 的需要div。

ul {
    overflow: auto;
}

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

于 2012-12-21T21:58:51.460 回答
0

我在 FF20 上遇到了类似的问题，但似乎只是我不小心放大了页面。将缩放重置为 0 删除了该线。

于 2013-04-20T17:10:01.197 回答
0

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

就我而言，我测试了以下内容：

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

这似乎是一个浏览器错误。

于 2013-06-29T01:20:06.890 回答
-4

尝试以下方法调整边框半径：

border-top-right-radius:10px;
-webkit-top-right-border-radius:10px;
border-top-left-radius:10px;
-webkit-top-left-border-radius:10px;
于 2012-12-21T17:14:15.437 回答