漸變不適用於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瀏覽器

回答

相關問題