css – 具有边框半径,圆角和奇怪背景重复的Safari bug

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

正如您所看到的,按钮的右边框似乎开始“重复”,按钮的左边框具有一些应该只在底部的颜色.

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

解决方法

原因

这是与启用硬件的Safari相关的错误.

您可以通过禁用“系统偏好设置”中“能量”下的“自动图形切换”进行验证(我假设您使用的是Mac,因为版本6不适用于Windows AFAIK).

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

经典的解决方案

您可以将按钮存储为图像,它可以在所有浏览器中使用,旧的方式 – 更多的工作(和带宽),但稳定的结果.

剪裁

可能解决方案

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

添加-webkit-background-clip：padding-Box;到你的CSS.