渐变不适用于 IE

Question

我可能有一个很常见的问题，到处搜索，几乎所有东西都试过了，显示：块，缩放：1，设置高度，宽度都没有用。我有一个表，它实际上是一个 POP UP，用 javascript 和 jquery 作为墙。这是我的代码的简单示例。

$(tr1).css('width','210px');
$(tr1).css('height','63px');
$(tr1).addClass('testClass');
$(tr1).css('border-bottom','solid 1px #c6c7c5');
$(tr1).mouseover(function(){
    $(tr1).css('cursor','pointer');
});

$(tr1).click(function(){
    open_report('EXCEL',sparam);
    popUpIsOpen = false;
    removePopupBtn();
    $(wrapperBox).remove();
});

$(tr2).css('width','210px');
$(tr2).css('height','63px');
$(tr2).addClass('testClass');

这是我的css

.testClass{
width: 210px;
height: 63px;
zoom: 1;
display: block;
background-repeat: no-repeat;

background: -webkit-gradient(linear, left top, left bottom, from(#dcdedb), to(#c9cbc8));
background: -moz-linear-gradient(top,  #dcdedb,  #c9cbc8);
background-image: -o-linear-gradient(top,  #dcdedb,  #c9cbc8);
background: -ms-linear-gradient(top, #dcdedb 0%,#c9cbc8 100%);
background: linear-gradient(top, #dcdedb 0%,#c9cbc8 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dcdedb', endColorstr='#c9cbc8',GradientType=0);
}

.testClass:hover {

background: -webkit-gradient(linear, left top, left bottom, from(#eaebea), to(#d6d7d5));
background: -moz-linear-gradient(top,  #eaebea,  #d6d7d5);
background-image: -o-linear-gradient(top,  #eaebea,  #d6d7d5);
background: -ms-linear-gradient(top, #eaebea 0%,#d6d7d5 100%);
background: linear-gradient(top, #eaebea 0%,#d6d7d5 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eaebea', endColorstr='#d6d7d5',GradientType=0);
}

在除 IE 之外的所有浏览器中工作（所有版本）... 任何帮助将不胜感激！ :)

---

在过滤器中添加了 GradientType=0，仍然无法正常工作。

Answer 1

将您的 CSS 更改为此，它应该可以工作

WORKING FIDDLE

.testClass {
    width: 210px;
    height: 63px;
    zoom: 1;
    display: block;
    background-repeat: no-repeat;
    background: #dcdedb;
    /* Old browsers */
    background: -moz-linear-gradient(top, #dcdedb 0%, #c9cbc8 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #dcdedb), color-stop(100%, #c9cbc8));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #dcdedb, #c9cbc8 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #dcdedb 0%, #c9cbc8 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #dcdedb 0%, #c9cbc8 100%);
    /* IE10+ */
    background: linear-gradient(to bottom, #dcdedb 0%#c9cbc8 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dcdedb', endColorstr='#c9cbc8', GradientType=0);
    /* IE6-9 */
}
.testClass:hover {
    background: #eaebea;
    /* Old browsers */
    background: -moz-linear-gradient(top, #eaebea 0%, #d6d7d5 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eaebea), color-stop(100%, #d6d7d5));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #eaebea 0%, #d6d7d5 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #eaebea 0%, #d6d7d5 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #eaebea 0%, #d6d7d5 100%);
    /* IE10+ */
    background: linear-gradient(to bottom, #eaebea 0%, #d6d7d5 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eaebea', endColorstr='#d6d7d5', GradientType=0);
    /* IE6-9 */
}

IE7 中工作代码的屏幕截图

Answer 2

您可以使用 CSS3Pie 在 IE 中使用 CSS3（渐变和...）。

CSS3Pie 网站：http://css3pie.com

并轻松使用：

<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="your-css3pie-file.css" />
<![endif]-->