CSS -webkit-filter: grayscale(0%) 在 IE 10 和 Safari 中不起作用答案

【问题标题】：CSS -webkit-filter: grayscale(0%) don't work in IE 10 and SafariCSS -webkit-filter: grayscale(0%) 在 IE 10 和 Safari 中不起作用
【发布时间】：2014-08-11 07:43:21
【问题描述】：

CSS Style -webkit-filter: grayscale(0%) 和 filter:none 在 IE 10 和 Safari 中不起作用。

例如，我有滑块图像，但图像上有一个灰度过滤器（我需要这个用于主页）

我实现了这个 CSS 代码：

.page-id-8 .slider-entry-image img{
    min-width:220px !important;
    width:220px !important;
    -webkit-filter: none!important;
    filter: url(""); /* Firefox 10+, Firefox on Android */
    filter: none!important; /* IE6-9 */
    -webkit-filter: grayscale(0%);
}

但滑块图像在 IE 10 和 Safari 中是灰色的：

但我需要这个视图：

URL LINK

我希望有人可以帮助我。

【问题讨论】：

仅供参考，IE 不支持 -webkit 供应商前缀。它支持-ms供应商前缀。

标签： css filter safari internet-explorer-10 grayscale

【解决方案1】：

这是一个使用 HTML5 和 jquery 的跨浏览器解决方案

Code

Demo

【讨论】：

演示在 IE 浏览器上无法运行，它显示两个图像相同，您知道解决方法吗？
我通过IE的开发者工具测试了IE9版本。这里是结果image。我个人忽略了 IE8 和之前的版本。
感谢您的解决方案。它在 IE 10 和 IE 11 中按预期工作。

【解决方案2】：

对所有浏览器都使用它

-webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: url(grayscale.svg); /* Firefox 4+ */
  filter: gray; /* IE 6-9 */

参考http://labs.voronianski.com/css3-grayscale/

【讨论】：

引用的 URL 不再有效。