Safari 渲染圆角不正确答案

【问题标题】：Safari Rendering Rounded Corners IncorrectlySafari 渲染圆角不正确
【发布时间】：2012-02-16 13:47:45
【问题描述】：

我有一个底部有圆角，顶部有普通角的 div。这个 div 的顶部也有一个边框。然而，这个边界似乎“渗透”到底部的圆角。此问题仅存在于 Safari（我使用的是 5.1.3）中，而不存在于 Chrome 或 Firefox 中。

与这个bug相关的CSS是：

.info {
    float: left;
    width: 272px;
    height: 200px;
    background: #222222;
    border-top: 5px solid #6fcbe4;
    -webkit-border-bottom-right-radius: 18px;
    -webkit-border-bottom-left-radius: 18px;
    -moz-border-radius-bottomright: 18px;
    -moz-border-radius-bottomleft: 18px;
    border-bottom-right-radius: 18px;
    border-bottom-left-radius: 18px;
    padding: 0 14px 0 14px;
}

html 是：

<div class="info left">
    <h3>new<span class="pink">server</span></h3>
</div>

结果如下图所示：

您可以看到底角的边缘是蓝色的。

有谁知道解决这个问题的方法还是我犯了一个错误？

谢谢。

【问题讨论】：

标签： html css safari rounded-corners

【解决方案1】：

这是一个错误，但您可以通过添加 bottom-border 来防止它：

border-bottom: 1px solid #222;

【讨论】：

【解决方案2】：

我认为这是 Safari 中的一个错误。我注意到在 Chrome 的小版本中也有类似的效果，这表明这是一个 Webkit 错误，Google 已修复但尚未在 Apple 版本中实现。

【讨论】：

对于那个特定的例子，我回到使用背景图像来创建圆角的错觉，但我现在已经接受了这个错误，只是让它成为现实。它会影响少数用户，并且在大多数情况下，我使用的小圆角并不是很明显。

【解决方案3】：

您是否尝试过定义底部、左侧和右侧的边框？

border-left: solid 0px none;
border-right: solid 0px none;
border-bottom: solid 0px none;

【讨论】：

不幸的是，这不起作用。我之前确实尝试过，但没有运气。