safari - 具有边界半径、圆角和奇怪背景重复的 Safari 错误

Question

http://jsfiddle.net/7KDr8/7/

使用 Safari 6.0.1 和以下样式，我的按钮以“错误”的方式呈现：

此错误仅发生在 Safari 中。

.btn {
    height: 40px !important;
    line-height: 40px !important;
    overflow: hidden;
    padding: 0 20px;
    text-align: center;
    margin: 0 auto;
    float: left;
    margin-bottom: 40px;
    background-color: #15518d;
    background-repeat: no-repeat !important;
    border-bottom: 4px solid #032a52 !important;
    text-shadow: 0 0 3px rgba(0,0,0,.2);
    color: #fff !important;
    font-weight: 500;
    font-size: 15px !important;
    border-radius: 4px;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    text-transform: none !important;
    cursor: pointer
}

如您所见，按钮的右边框似乎开始“重复”，而按钮的左边框具有一些原本应该位于底部的颜色。

有没有人遇到过这个错误或知道修复？谢谢！

Answer 1

原因

这是一个与硬件启用的 Safari 相关的错误。

您可以通过禁用“”中的“ Automatic Graphics Switching”下的“ Energy”来验证System Preferences（我假设您在 Mac 上，因为 Windows AFAIK 无法使用版本 6+）。

由于它是一个错误，因此需要在 safari 代码中修复。

经典的解决方法

您可以将按钮存储为图像，它可以在所有浏览器中使用，这是旧的时尚方式 - 工作量（和带宽）更多，但结果稳定。

剪裁

可能的解决方案 -

来自这篇文章：Safari 中 965 像素以上带有边框半径的垂直线

添加-webkit-background-clip: padding-box;到您的 CSS。

Answer 2

我已经更新了小提琴

我认为在正常情况下应该没有问题，

我刚刚!important从不应删除的属性中删除。

我添加了一些悬停效果..，

只要确保您是否可以删除padding:20px或减少它，这将是我不推荐的一个加分点，至少与您解决相同目的的行高一样......

如果有帮助，请尝试运行这个..

否则如果没有解决请回复..

Answer 3

我认为你应该使用

-webkit-border-radius：5px；

您将获得所需的半径。

Answer 4

你可以试试这个：

.selector {
    -webkit-border-radius: 10px;
    -moz-border-radius:10px;
    border-radius:10px;
    -khtml-border-radius: 10px;
}

按照那个链接：演示

Answer 5

你可以试试这个：

.selector {
 -webkit-border-radius: 10px;
 -moz-border-radius:10px;
 border-radius:10px;
 -khtml-border-radius: 10px; 
}

你也可以点击这个链接：DEMO