Safari渲染圆角不正确 [英] Safari Rendering Rounded Corners Incorrectly

问题描述

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

与此错误相关的CSS为：

  .info {
 float：left; 
 width：272px; 
 height：200px; 
背景：＃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>新< span class =pink>服务器< / span>< / h3> 
< / div> 
  

结果如下图所示：

可以看到最下面的角落对他们有一个蓝色的边缘。

有人知道一个解决这个问题的方法，还是我犯的一个错误？ b
$ b

谢谢。

解决方案

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

  border-bottom：1px solid＃222; 
  

I have a div with rounded corners at the bottom and normal corners at the top. This div also has a border along the top. However this border seems to 'seep through' down to the rounded corners at the bottom. This issue is only present in Safari (I'm using 5.1.3) and not Chrome or Firefox.

The CSS related to this bug is:

.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;
}

And the html is:

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

And this results in the image seen below:

Where as you can see the bottom corners have a blue edge to them.

Does anyone know a work around to this or is it a mistake I'm making?

Thanks.

解决方案

It's a bug, but you can prevent it by adding a bottom-border:

border-bottom: 1px solid #222;

这篇关于Safari渲染圆角不正确的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！