2013-05-06 14 views
21

C'è un modo per far funzionare il filtro immagine in scala di grigi su IE 10 senza JavaScript o SVG?Immagine in scala di grigi del filtro CSS per IE 10

Sto usando il seguente codice con successo in tutti i browser tranne 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%);} 

risposta

24

Questo approccio funziona solo in WebKit e Firefox. Non funziona in IE o Opera. WebKit è attualmente l'unico browser a supportare i filtri CSS, mentre Firefox supporta i filtri SVG su HTML. Opera e IE supportano i filtri SVG, ma solo per i contenuti SVG.

Non esiste un modo valido per farlo funzionare in IE10, poiché ha abbandonato il supporto per i filtri IE precedenti. C'è un modo, tuttavia, non lo raccomanderei.

È possibile impostare IE10 per il rendering utilizzando la modalità standard di IE9 mediante i seguenti elementi meta in testa:

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

Questo si trasformerà supporto per la schiena su di legacy filtri di IE. Tuttavia, ha l'effetto collaterale di far cadere IE in modalità IE9, dove gli ultimi progressi in IE10 non saranno più supportati. Nel tuo caso potrebbe essere possibile che al momento non ti servano queste nuove funzionalità, ma se segui questa strada, dovresti esserne a conoscenza quando effettui l'aggiornamento del sito in futuro.

+2

Questo non funziona: http://blogs.msdn.com/b/ie/archive /2012/06/04/legacy-dx-filters-removed-from-ie10-release-preview.aspx –

+1

Firefox 35 è stato appena rilasciato e ora supporta i filtri CSS https://developer.mozilla.org/en-US/Firefox/Uscite/35 –

0

Questa è una soluzione cross browser con HTML5 e jQuery con effetto dissolvenza

Code

Demo

Problemi correlati