在div背景中的漸變樣式，在IE中不工作

-1

我正在嘗試製作一個很好的框架，用於插入我正在處理的網頁中的徽標。由於某些原因，IE不會顯示那個具有褪色顏色的div。我想要的只是一個帶預定義維度的空白div中的簡單漸變。谷歌鉻是顯示它就像我想要的，但IE瀏覽器不顯示任何東西。由於我已經從here複製梯度部分而不理解一個詞，我無法調試它。在div背景中的漸變樣式，在IE中不工作

下面是代碼（在一個非常簡化版本）：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="iso-8859-8-i"> 
<style> 
#headGreen{ 
    float: left; 
    margin: 52px 0px 0px 0px; 
    width : 300px; 
    height: 30px; 
    background-image: linear-gradient(right , rgb(255,255,255) 50%, rgb(68,179,68) 62%); 
    background-image: -o-linear-gradient(right , rgb(255,255,255) 50%, rgb(68,179,68) 62%); 
    background-image: -moz-linear-gradient(right , rgb(255,255,255) 50%, rgb(68,179,68) 62%); 
    background-image: -webkit-linear-gradient(right , rgb(255,255,255) 50%, rgb(68,179,68) 62%); 
    background-image: -ms-linear-gradient(right , rgb(255,255,255) 50%, rgb(68,179,68) 62%); 

    background-image: -webkit-gradient(
     linear, 
     right top, 
     left top, 
     color-stop(0.04, rgb(255,255,255)), 
     color-stop(0.82, rgb(68,179,68)) 
    ); 
} 
#header{ 
    width: 800px; 
    height: 100px; 
} 
</style> 
</head> 
<body> 
<div id="header"> 
<div id="headGreen"></div> 
</div> 
</body> 
</html>

我使用IE9，但我想它在其他國家也工作。謝謝:)

來源

2012-03-13 Ramzi Kahil

http://stackoverflow.com/questions/3934693/gradients-in-internet-explorer-9的重複？換句話說，你不能。需要使用MSIE過濾器。 – anothershrubery 2012-03-13 14:36:22

-ms-linear梯度只能在IE中使用10

使用以下命令：

filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#0c93c0', endColorStr='#FFFFFF', GradientType=0); 
-ms-filter: "progid:DXImageTransform.Microsoft.Gradient(startColorStr='#0c93c0', endColorStr='#FFFFFF', GradientType=0)";

filter在IE7-
-ms-filter支持在IE8建議 - 9.重要提示：物業價值必須被引用。

請參閱CSS3 cross browser linear gradient瞭解有關梯度過濾器語法的詳細說明。

來源

2012-03-13 14:38:24

我推薦使用Ultimate CSS Gradient Generator來生成漸變。

它利用IE的本地過濾器，並確保兼容所有的方式返回到IE6。我經常用這個。

來源

2012-03-13 14:38:15 gmeben

我不認爲IE9已經支持這一切，我發現是這樣的：

http://ie.microsoft.com/testdrive/Graphics/CSSGradientBackgroundMaker/Default.html

參考CSS3請IE10將支持它。

http://css3please.com/

我覺得老版本會工作，因爲他們是：

/*IE7-*/ filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#0c93c0', endColorStr='#FFFFFF', GradientType=0); 
/*IE8+*/ -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(startColorStr='#0c93c0', endColorStr='#FFFFFF', GradientType=0)"; 

    background-color: transparent; 
    background-color: rgba(180, 180, 144, 0.6); 
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99B4B490,endColorstr=#99B4B490); 
      zoom: 1;

來源

2012-03-13 14:39:04

以下過濾wlil只能通過IE瀏覽器來閱讀：

#headGreen{ 
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#44B244'); 
}

來源

2012-03-13 14:40:06 spacebiker

梯度Internet Explorer一直回到第6版讓你失望？

不用擔心！查看CSS3Pie。

http://css3pie.com/

感謝，希望這有助於！ Aaron

來源

2012-03-13 15:46:15

這個網站是篦子！我已經採取了另一個有效的答案，但它還有一些我需要的東西...謝謝！ :) – 2012-03-13 16:22:38

我很高興我能幫到你。享受CSS3Pie Martin！ :-D。我一直都在使用它。 – 2012-03-13 16:25:44

在div背景中的漸變樣式，在IE中不工作

回答

相關問題