Safari渲染圆角不正确

Question

我有一个div，底部有圆角，顶部有正常角。这个div也有一个沿着顶部的边界。然而，这个边界似乎“渗透”到底部的圆角。此问题仅出现在Safari中（我使用的是5.1.3），而不是Chrome或Firefox。

与此错误相关的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>

这导致下图所示：

在哪里可以看到底角有蓝色边缘。

有没有人知道这方面的工作还是我正在犯的错误？

感谢。

Answer 1

我认为这是Safari中的一个错误。我注意到在Chrome的略微订购版本中有类似的效果，这表明这是一个谷歌已经修复但尚未在Apple版本中实现的Webkit错误。

Answer 2

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

来阻止它

border-bottom: 1px solid #222;

Answer 3

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

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