有没有办法让这个 CSS 类在 Internet Explorer 11 中工作？
.inactive {
filter: contrast(0.5) sepia(100%) hue-rotate(116deg) brightness(1.2) saturate(0.28);
}
我尝试使用 SVG 灰度过滤器，但它不起作用，也破坏了常用浏览器的整个过程。 “避免使用 IE11”，即使是最好的建议，在这种情况下也不是合适的解决方案
【问题讨论】：
标签： css internet-explorer-11 grayscale css-filters
使用 -ms-high-contrast 创建一个媒体查询，在其中放置 IE 10 和 11 特定的 CSS 样式。因为 -ms-high-contrast 是 Microsoft 特有的（并且仅在 IE 10+ 中可用），所以只能在 Internet Explorer 10 及更高版本中解析。
-ms-high-contrast 支持两个值：none 和 active。因此，无论属性设置如何，要针对 IE10+，请使用以下媒体查询：
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
}
【讨论】：
Older versions of Internet Explorer (4.0 to 8.0) supported a non-standard "filter" property that has been deprecated，IE 11 不支持该属性。
您可以尝试在 IE 11 中使用 SVG 覆盖来完成灰度。例如：
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
img.grayscale:hover {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
}
svg {
background: url(http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s400/a2cf7051-5952-4b39-aca3-4481976cb242.jpg);
}
svg image:hover {
opacity: 0;
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" id="svgroot" viewBox="0 0 400 377" width="400" height="377">
<defs>
<filter id="filtersPicture">
<feComposite result="inputTo_38" in="SourceGraphic" in2="SourceGraphic" operator="arithmetic" k1="0" k2="1" k3="0" k4="0" />
<feColorMatrix id="filter_38" type="saturate" values="0" data-filterid="38" />
</filter>
</defs>
<image filter="url("#filtersPicture")" x="0" y="0" width="400" height="377" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s1600/a2cf7051-5952-4b39-aca3-4481976cb242.jpg" />
</svg>
</body>
（来自：http://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with-css.html）
简化的 JSFiddle：http://jsfiddle.net/KatieK/qhU7d/2/
更多关于SVG滤镜的细节，可以参考this blog。
如果 SVG 过滤器仍然不适合你，我建议你可以尝试设置 CSS Opacity 属性。
【讨论】：