带有 CSS 渐变的奇怪 Safari CSS 错误答案

【问题标题】：Strange Safari CSS bug with CSS gradients带有 CSS 渐变的奇怪 Safari CSS 错误
【发布时间】：2013-04-28 16:25:23
【问题描述】：

你好，

我已向此按钮添加了 CSS 渐变，但似乎出现了一条奇怪的线条。有什么办法可以解决这个问题吗？

CSS：

#view-content .billing-form #submit {
    background: #94c723; /* Old browsers */
    background: -moz-linear-gradient(top,  #94c723 0%, #6cb119 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#94c723), color-stop(100%,#6cb119)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #94c723 0%,#6cb119 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #94c723 0%,#6cb119 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #94c723 0%,#6cb119 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #94c723 0%,#6cb119 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#94c723', endColorstr='#6cb119',GradientType=0 ); /* IE6-9 */
    border: none;
    border-top: 1px solid #a1d61a;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    color: #FFFFFF;
    font-size: 18px;
    line-height: 40px;
    padding: 0 70px;
    font-weight: bold;
    font-family: Arial, sans-serif;
}

【问题讨论】：

我在 Safari 版本 5.1.2 (6534.52.7) 上尝试了这个fiddle，没问题。能否提供相关的HTML代码？
html 只是一个输入 type=submit。另外，我相信这会影响最新的 Safari（6？）
我正在更新我的 Safari 版本。同时，使用 Safari 的 HTML/CSS 检查器检查应用于提交按钮的所有规则
你能用一个宽度吗？这将是一个黑客，但它可能会工作......仅供参考，我也没有在小提琴上看到这个问题。
是否有其他 CSS 会影响按钮的样式？

标签： css safari gradient

【解决方案1】：

只是一个想法，但为什么不在pixlr 上制作渐变叠加层并将其设置为背景图像。然后你不再有这个问题，你节省了大约十行代码..

【讨论】：

这是我最终采用的方法

【解决方案2】：

试试这个：

#view-content .billing-form #submit {
    background: #94c723; /* Old browsers */
    background: -moz-linear-gradient(top,  #94c723 0%, #6cb119 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#94c723), color-stop(100%,#6cb119)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #94c723 0%,#6cb119 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #94c723 0%,#6cb119 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #94c723 0%,#6cb119 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #94c723 0%,#6cb119 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#94c723', endColorstr='#6cb119',GradientType=0 ); /* IE6-9 */
    border: none;
    border-top: 1px solid #a1d61a;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    color: #FFFFFF;
    font-size: 18px;
    line-height: 40px;
    padding: 0 70px;
    font-weight: bold;
    font-family: Arial, sans-serif;
    display: block;
    outline: none;
}

【讨论】：

不幸的是，这并没有解决问题 - 感谢您的回复