CSS - IE 中的渐变

Question

我在 IE 中显示带渐变的按钮时遇到问题。我的 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);
}

这是我的 fiddle :http://jsfiddle.net/oampz/Wm67h/

如有任何帮助，我们将不胜感激。

谢谢

更新:

创建了一个新的 fiddle :http://jsfiddle.net/oampz/Wm67h/6/使用提到的生成器之一，在 FF 中很好，在 IE 中看起来更糟!

更新

这把 fiddle :http://jsfiddle.net/Wm67h/7/在 IE 中更好，但没有圆形边框/边缘，悬停属性不起作用。

Answer 1

使用 filter 使其适用于 IE。

例如，

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

将 'xx' 替换为您的渐变值。

希望这对您有所帮助。