CSSグラデーション - クロム - 私は<a href="http://www.colorzilla.com/gradient-editor/" rel="nofollow noreferrer">http://www.colorzilla.com/gradient-editor/</a>によって生成された勾配を使用してこれらのCSSのボタンを持っている

Question

不快縦ストライプ - ：単にホバー状態はグラデーションを反転させ、アクティブ状態では、トップ追加：1ピクセル。

イメージからわかるように、「無料トライアル」ボタンの左端と「今すぐ購入」ボタンの右端には、わずかな縦縞があります。

これは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

追加border-left：none;.big-button.orange：ホバーおよびborder-right：none;は緑のために私のための行をフィドルで（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; 

}

Answer 2

以下のいくつかのCSSを持っています。それは問題がある2つのボタンの周りのラッパーかもしれないように見えますか？

グラデーションを「背景」ではなく「背景画像」に適用してみてください（通常はそうです）。