google-chrome - CSS 渐变 - Chrome - 恶心的垂直条纹

Question

我有这些 CSS 按钮，它们使用 http://www.colorzilla.com/gradient-editor/ 生成的渐变- :hover 状态简单地反转渐变，事件状态添加 top: 1px;

如图所示，“免费试用”按钮的左边缘和“立即购买”按钮的右边缘有一条微弱的垂直条纹。

这仅在 Chrome 中显示(在 Safari 中看起来不错)。有人知道这个问题的修复方法吗？

我在下面有一些 CSS

.big-button {
    width: 120px;
    height: 40px;
    border: none;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    position: relative;
}
.big-button:hover {
    cursor: pointer;
}
.big-button-wrap .big-button:active {
    top: 7px !important;
}

.big-button.orange {
    background: #fe7d0a; /* Old browsers */
    background: -moz-linear-gradient(top,  #fda11a 0%, #ff6801 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fda11a), color-stop(100%,#ff6801)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #fda11a 0%,#ff6801 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #fda11a 0%,#ff6801 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #fda11a 0%,#ff6801 100%); /* IE10+ */
    background: linear-gradient(top,  #fda11a 0%,#ff6801 100%); /* W3C */
    border: 1px solid #ff6801;
}
.big-button.orange:hover, .big-button.orange:active {
    background: #fe7d0a; /* Old browsers */
    background: -moz-linear-gradient(top,  #ff6801 0%, #fda11a 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff6801), color-stop(100%,#fda11a)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #ff6801 0%,#fda11a 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #ff6801 0%,#fda11a 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #ff6801 0%,#fda11a 100%); /* IE10+ */
    background: linear-gradient(top,  #ff6801 0%,#fda11a 100%); /* W3C */
}

Answer 1

为 .big-button.orange:hover 和 添加 border-left:none;>border-right:none; 为绿色删除了 fiddle 中的线条(使用 Chrome)。

这是我的 CSS:

.big-button.orange:hover, .big-button.orange:active {
background: #fe7d0a; /* Old browsers */
background: -moz-linear-gradient(top,  #ff6801 0%, #fda11a 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff6801), color-stop(100%,#fda11a)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ff6801 0%,#fda11a 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ff6801 0%,#fda11a 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ff6801 0%,#fda11a 100%); /* IE10+ */
background: linear-gradient(top,  #ff6801 0%,#fda11a 100%); /* W3C */
border-left:none;

.big-button.green:hover, .big-button.green:active {
background: #6a9a23; /* Old browsers */
background: -moz-linear-gradient(top,  #558711 0%, #8cb941 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#558711), color-stop(100%,#8cb941)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #558711 0%,#8cb941 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #558711 0%,#8cb941 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #558711 0%,#8cb941 100%); /* IE10+ */
background: linear-gradient(top,  #558711 0%,#8cb941 100%); /* W3C */
border-right:none;

}