Safari浏览器存在边框半径、圆角和奇怪的背景重复问题

Question

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

这个bug只在Safari中出现。

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

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

正如您所看到的，按钮的右边框似乎开始“重复”，而按钮的左边框中有一些本来只应该在底部的颜色。

有没有人遇到过这个bug或者知道解决方法？谢谢！

- HandiworkNYC.com

---

你应该使用Firebug或本地开发工具来切换每一行，查看问题从哪里开始。 - approxiblue

我在Chrome中没有看到它，所以它一定是Safari特有的。 - Mr Lister

问题的标题和正文中都提到了这个bug是在Safari浏览器中出现的。 - HandiworkNYC.com

我在Safari上没有发现任何错误，你使用的是哪个版本？ - Gregoire D.

似乎在特定版本（6.0.1）中存在一个错误，因为在最新版本（6.0.5（7536.30.1））中无法重现该问题。我建议您从样式块中开始注释声明，直到找到导致您看到的问题的属性（或属性组合）。 - André Dion

Answer 1

原因

这是与启用硬件的 Safari 相关的 bug。

您可以在“系统偏好设置”中的“能源”下禁用“自动切换图形”，来进行验证（我假设您正在使用 Mac，因为版本 6+ 在 Windows 上不可用）。

由于这是一个 bug，需要在 Safari 代码中进行修复。

经典解决方法

你可以将你的按钮存储为图像，并在所有浏览器中工作，这是一种旧式的方法 - 工作量略大（且带宽占用更高），但结果稳定。

剪辑

可能的解决方案 -

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

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

- user1693593

Answer 2

我认为你应该使用以下样式：

-webkit-border-radius: 5px;

这将得到你所需的圆角。

- user2570485

Answer 3

我已经更新了fiddle。

在正常情况下不应该有问题，

我刚刚从属性中删除了!important，这些属性不应该被删除。

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

只需确保您是否可以删除padding:20px或者是否可以减少它，这将是一个加分点，至少我不建议这样做，因为使用行高可以达到同样的目的....

尝试运行此代码以查看是否有效。

否则，请回复我。

- MarmiK

---

似乎是随机发生的。有时候当我刷新页面时，按钮是正常的（没有错误），但悬停在按钮上总是会触发它。 - HandiworkNYC.com

Answer 4

你可以尝试这个：

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

请跟随该链接：DEMO

- kishan Radadiya

Answer 5

你可以尝试这个：

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

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

- kishan Radadiya