2013-05-06 3 views
21

Есть ли способ, чтобы фильтр полутонового изображения работал на IE 10 без JavaScript или SVG?CSS-фильтр в градациях серого для 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%);} 

ответ

24

Этот подход работает только в WebKit и Firefox. Он не работает в IE или Opera. В настоящее время WebKit является единственным браузером, поддерживающим фильтры CSS, в то время как Firefox поддерживает фильтры SVG в HTML. Opera и IE поддерживают SVG-фильтры, но только для содержимого SVG.

Невозможно сделать эту работу в IE10, поскольку она опустила поддержку устаревших фильтров IE. Однако есть способ, который я бы не рекомендовал.

Вы можете установить IE10 для визуализации с использованием режима IE9 стандартов, используя следующий мета-элемент в голове:

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

Это повернет поддержку обратно для старых IE фильтров. Однако он имеет побочный эффект отбрасывания IE в режим IE9, где последние улучшения в IE10 больше не будут поддерживаться. В вашем случае может оказаться, что вам не нужны эти новые функции в настоящее время, но если вы пойдете по этой дороге, вам нужно будет знать об этом при обновлении сайта в будущем.

+2

Это не будет работать: http://blogs.msdn.com/b/ie/archive /2012/06/04/legacy-dx-filters-removed-from-ie10-release-preview.aspx –

+1

Firefox 35 был только что выпущен и теперь поддерживает CSS-фильтры https://developer.mozilla.org/en-US/Firefox/релизы/35 –

0

Это решение кросс-браузер с помощью HTML5 и JQuery, используя эффект выцветанию

Code

Demo