用于IE 10的CSS滤镜灰度图像

Question

有没有办法让灰度图像过滤器在没有JavaScript或SVG的情况下在IE 10上运行？

我一直在IE 10以外的所有浏览器中成功使用以下代码.

img{
filter:url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter     id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /*     Firefox 10+, Firefox on Android */
filter:gray; /* IE6-9 */
-webkit-filter:grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
-moz-filter: grayscale(100%);
-o-filter: grayscale(100%);}

Answer 1

此方法仅适用于WebKit和Firefox.它在IE或Opera中不起作用.WebKit是目前唯一支持CSS过滤器的浏览器,而Firefox支持HTML上的SVG过滤器.Opera和IE支持SVG过滤器,但仅适用于SVG内容.

没有好的方法可以在IE10中完成这项工作,因为它不再支持传统的IE过滤器.但有一种方法,我不推荐它.

您可以使用头部中的以下元素将IE10设置为使用IE9标准模式进行渲染:

<meta http-equiv="X-UA-Compatible" content="IE=9">

这将为旧版IE过滤器重新启用支持.但是,它具有将IE放入IE9模式的副作用,其中将不再支持IE10的最新进展.在您的情况下,您当前可能不需要这些新功能,但如果您沿着这条路走下去,那么在将来更新网站时您需要了解它.