0

似乎下面的代码不适用于ie9。有解决方法吗？谢谢

.orangeback {
/* IE10 Consumer Preview */ 
background-image: -ms-linear-gradient(top, #FF6900 0%, #FF8214 100%);

/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, #FF6900 0%, #FF8214 100%);

/* Opera */ 
background-image: -o-linear-gradient(top, #FF6900 0%, #FF8214 100%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FF6900), color-stop(1, #FF8214));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, #FF6900 0%, #FF8214 100%);

/* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to bottom, #FF6900 0%, #FF8214 100%);
}
4

2 回答 2

1

尝试

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#000000');/*For IE7-8-9*/

让我知道它是否有效。

于 2013-10-01T15:32:35.960 回答
1

这非常接近：

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ff6900', endColorstr='#ff8214',GradientType=0 );

这适用于 IE6+。

或者，对于 JUST IE9，您可以使用以下样式将其替换为 SVG，如果该filter选项不浮动您的船：

添加到.orangeback：

background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmNjkwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZjgyMTQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);

还要.ie9-gradient向这些元素添加类，并在结束head标记之前添加以下内容：

<!--[if gte IE 9]>
  <style type="text/css">
    .ie9-gradient {
       filter: none;
    }
  </style>
<![endif]-->

要在 IE9 中为 CSS3 渐变使用 SVG polyfill，您需要禁用过滤器，因此此代码保留了filterIE6-8 的渐变回退并为 IE9 使用 SVG。

在您的情况下，实际上不需要为 IE9 使用 SVG polyfill，因为您使用的是普通的 2 色线性渐变。如果您有更复杂的梯度，则第二种解决方案可能会更可取，但出于您的目的，仅使用该filter解决方案应该可以正常工作。

使用这个（或 CSS 预处理器），再也不用担心 CSS3 渐变：Colorzilla Gradient Generator

于 2013-10-01T15:34:16.813 回答