Question

我正在尝试为将要插入我正在处理的网页中插入徽标制作一个漂亮的框架。由于某种原因，IE将不会显示该div，并且颜色会逐渐消失。我想要的只是一个带有预定义尺寸的空div中的简单渐变。 Google Chrome就像我想要的那样显示它，但IE没有显示任何内容。由于我从here复制了渐变部分而没有理解一个单词，我无法调试它。

以下是代码（非常简化版本）：

<!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，但我希望它能在其他人中使用。谢谢:)）

Answer 1

渐变在Internet Explorer中，一直回到版本6会让你失望吗？

不用担心！看看CSS3Pie。

http://css3pie.com/

谢谢，希望这有帮助！亚伦

Answer 2

我建议使用Ultimate CSS Gradient Generator生成渐变。

它利用IE的原生过滤器，确保兼容IE6。我一直都在用这个。

Answer 3

-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 -
-ms-filter - 9.重要提示：必须引用属性值。

有关渐变过滤器语法的详细说明，请参阅CSS3 cross browser linear gradient。

Answer 4

我不认为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;

Answer 5

以下过滤器只能由IE读取：

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

在div背景中的渐变样式，在IE中不起作用

5 个答案: