具有边框半径、圆 Angular 和奇怪的背景重复的 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 相关的错误。

您可以通过禁用“系统偏好设置”中“能量”下的“自动图形切换”来验证(我假设您重新在 Mac 上运行，因为版本 6+ 不适用于 Windows AFAIK)。

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

经典解决方法

您可以将您的按钮存储为图像，它可以在所有浏览器中使用，这是老式的方式 - 需要更多的工作(和带宽)，但结果稳定。

剪裁

可能的解决方案-

来自这篇文章:Stray vertical line above 965 pixels with border radius in Safari

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