Safari渲染圆角不正确

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

有关这个错误的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>

，这导致下面看到的图像：

Weird rounded corners

在哪里正如你所看到的，底角对他们来说是一个蓝色的边缘。

有没有人知道一个解决此问题或是我犯的一个错误？

谢谢。

来源

2012-02-16 alexganose

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

border-bottom: 1px solid #222;

来源

2012-02-16 14:20:45 bookcasey

谢谢，不太清楚为什么我以前没有尝试过。 – alexganose 2012-02-16 14:22:37

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

来源

2012-02-16 14:02:36

你有没有设法找到一个解决办法？ – alexganose 2012-02-16 14:12:53

对于这个特定的例子，我回到使用背景图像来创建圆角的幻觉，但我现在已经接触到这个错误并简单地让它成为。它会影响少数用户，并且在大多数情况下，它在我使用的小圆角中不是很明显。 – 2012-02-16 14:48:53

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

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

来源

2012-02-16 14:02:58

不幸的是，这是行不通的。我曾尝试过，但没有运气。 – alexganose 2012-02-16 14:12:28

Safari渲染圆角不正确

回答

相关问题