渐变不适用于IE浏览器

我可能有很常见的问题，搜索一遍，几乎都尝试过，显示：块，缩放：1，设置高度，宽度没有任何工作。我有桌子，这实际上是一个POP UP，用javascript和jQuery作为墙壁。这是我的代码的简单例子。渐变不适用于IE浏览器

$(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除了IE（所有版本）... 任何帮助将不胜感激在所有浏览器

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

工作！ :)

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

来源

2013-07-26 sla55er

我们在谈论什么版本的IE？你看过http://stackoverflow.com/questions/3934693/gradients-in-internet-explorer-9？ – reto

IE8和

@DKM：它们使用IE过滤器。 –

你的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中的工作代码 SCREENSHOT OF WORKING CODE IN IE7

来源

2013-07-26 13:17:15 AnaMaria

嗯，我在IE 10和9中测试了这段代码。完全适合我，所以我不知道你在说什么。 – AnaMaria

实际上它是打破页面的asp文件，所以你的代码和我的工作一样。 IE中仍然没有（指定8）; – sla55er

我居然坐下来测试我的整个codein IE10,9,8,7。完全按照相同的方式工作4.因此，它肯定不是CSS的问题。 – AnaMaria

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

CSS3Pie网站：http://css3pie.com

，并用它容易：

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

来源

2013-07-26 13:11:40

渐变不适用于IE浏览器

回答

相关问题