Hình ảnh màu xám của bộ lọc CSS cho IE 10

Có cách nào để làm cho bộ lọc ảnh màu xám hoạt động trên IE 10 mà không có JavaScript hoặc SVG không?Hình ảnh màu xám của bộ lọc CSS cho IE 10

Tôi đã sử dụng đoạn mã sau thành công trong tất cả các trình duyệt trừ 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%);}

Nguồn

2013-05-06 Wissam Abyad

Cách tiếp cận này chỉ hoạt động trong WebKit và Firefox. Nó không hoạt động trong IE hoặc Opera. WebKit hiện là trình duyệt duy nhất hỗ trợ các bộ lọc CSS, trong khi Firefox hỗ trợ các bộ lọc SVG trên HTML. Opera và IE hỗ trợ các bộ lọc SVG, nhưng chỉ dành cho nội dung SVG.

Không có cách nào tốt để thực hiện công việc này trong IE10, vì nó đã giảm hỗ trợ cho các bộ lọc IE cũ. Có một cách, tuy nhiên, tôi không khuyên bạn nên.

Bạn có thể đặt IE10 để render sử dụng IE9 tiêu chuẩn chế độ sử dụng các yếu tố meta sau vào đầu:

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

này sẽ lần lượt hỗ trợ trở lại cho các bộ lọc di sản IE. Tuy nhiên, nó có tác dụng phụ của việc thả IE vào chế độ IE9, nơi những tiến bộ mới nhất trong IE10 sẽ không còn được hỗ trợ nữa. Trong trường hợp của bạn, có thể bạn không cần các tính năng mới này hiện tại, nhưng nếu bạn đi xuống con đường này, bạn cần phải biết điều đó khi cập nhật trang web trong tương lai.

Nguồn

2013-05-07 00:13:20

này sẽ không làm việc: http://blogs.msdn.com/b/ie/archive /2012/06/04/legacy-dx-filters-removed-from-ie10-release-preview.aspx –

Firefox 35 vừa được phát hành và hiện hỗ trợ Bộ lọc CSS https://developer.mozilla.org/en-US/Firefox/Phát hành/35 –