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);
}

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

任何帮助，将不胜感激。

谢谢

更新：

创建了一个新的提琴： 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%);

小提琴

如果您需要有关渐变的帮助，我总是发现此生成器非常有用