边境半径，圆角和奇怪的背景重复的Safari bug

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，因为版本6+不适用于Windows据我所知）。

因为它需要在safari代码中修复它。

经典解决方案

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

剪辑

可能的解决方案 -

从这篇文章：Stray vertical line above 965 pixels with border radius in Safari

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

Answer 2

我更新了fiddle

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

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

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

只要确定你是否可以移除padding:20px或者你是否可以减少它，这将是我不推荐的加分点，至少与行高相同，你正在解决相同的目的.... / p>

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

如果没有解决，请回复..

Answer 3

我认为你应该使用

-webkit-border-radius：5px;

您将获得所需的半径。

Answer 4

你可以试试这个：

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

关注该链接：DEMO

Answer 5

你可以试试这个：

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

  

您也可以点这个链接：DEMO