CSS - 漸變在IE中

Question

我在使用漸變顯示按鈕時遇到問題。我的CSS似乎在FireFox和Chrome中很好，但IE似乎給出了問題。

CSS：

.btn { 
cursor: pointer; 
border: none; 
display: inline-block; 
margin: 0; 
line-height: 1;  
width: 100%; 
padding: 0.5em 0; 
text-align: center; 
-webkit-border-radius: 6px; 
-moz-border-radius: 6px; 
-ms-border-radius: 6px; 
-o-border-radius: 6px; 
border-radius: 6px; 
-webkit-box-shadow: 0 0 4px rgba(51, 51, 51, 0.125); 
-moz-box-shadow: 0 0 4px rgba(51, 51, 51, 0.125); 
box-shadow: 0 0 4px rgba(51, 51, 51, 0.125); 
width: 300px; 
} 


.btn--primary { 
border: 1px solid #3A6896; 
color: white; 
font-size: 1.2em; 
} 


.btn--primary { 
background: #09427c; 
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #2597FE), color-stop(100%, #015CAE)); 
background-image: -webkit-linear-gradient(#2597FE, #015CAE); 
background-image: -moz-linear-gradient(#2597FE, #015CAE); 
background-image: -o-linear-gradient(#2597FE, #015CAE); 
background-image: linear-gradient(#2597FE, #015CAE); 
} 


.btn--primary:hover, .btn--primary:focus, .btn--primary[disabled] { 
background: #09427c; 
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #0b5299), color-stop(100%, #07335f)); 
background-image: -webkit-linear-gradient(#0b5299, #07335f); 
background-image: -moz-linear-gradient(#0b5299, #07335f); 
background-image: -o-linear-gradient(#0b5299, #07335f); 
background-image: linear-gradient(#0b5299, #07335f); 
} 

這裏是我的小提琴：http://jsfiddle.net/oampz/Wm67h/

任何幫助，將不勝感激。

感謝

UPDATE：

創建一個新的小提琴：使用提到一臺發電機http://jsfiddle.net/oampz/Wm67h/6/，是FF精細，看起來即使在IE糟糕！

UPDATE

這小提琴：http://jsfiddle.net/Wm67h/7/是更好的在IE但是沒有圓角邊框/邊緣和懸停屬性不起作用。

Answer 1

使用filter使其適用於IE。

例如，

.yourClass{ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='xx', endColorstr='xx',GradientType=0); 
} 

更換'XX'與梯度值。

希望這會有所幫助。

Answer 2

想想你的梯度編碼是錯誤的，試試這個：

background-image: -webkit-gradient(
    linear, 
    left top, 
    left bottom, 
    color-stop(0, #2599FE), 
    color-stop(0.8, #015DAE) 
); 
background-image: -o-linear-gradient(bottom, #2599FE 0%, #015DAE 80%); 
background-image: -moz-linear-gradient(bottom, #2599FE 0%, #015DAE 80%); 
background-image: -webkit-linear-gradient(bottom, #2599FE 0%, #015DAE 80%); 
background-image: -ms-linear-gradient(bottom, #2599FE 0%, #015DAE 80%); 
background-image: linear-gradient(to bottom, #2599FE 0%, #015DAE 80%); 

Fiddle

，如果你需要用漸變的幫助，我一直覺得this generator是非常有用的