CSS3过滤器不适用于IE 10中的元素

Question

我有以下代码段，它适用于除（大惊喜）Internet Explorer之外的所有浏览器。 图像保持黑色，没有阴影，IE中没有任何东西。

我不是想让DXTransform正常工作，而是要使用css3过滤器功能。 我希望-ms-filter或filter可以触发css3过滤器，但是我找不到合适的CSS来使此功能正常工作。

据我所知，它应该可以工作，它是一个内联块元素，具有所有的花哨功能……但这只是一个无聊的背景图像（至少该部分起作用了，就是这样）。

 .uiicon { width:64px; height:64px; display:inline-block; -webkit-background-size: cover; /* For WebKit*/ -moz-background-size: cover; /* Mozilla*/ -o-background-size: cover; /* Opera*/ background-size: cover; } .uiicon-filter-darkgreen-dropshadow { -webkit-filter: invert(33%) sepia(89%) hue-rotate(95deg) saturate(255%) drop-shadow(4px 4px 7px rgba(0,0,0,0.2)); -moz-filter: invert(33%) sepia(89%) hue-rotate(95deg) saturate(255%) drop-shadow(4px 4px 7px rgba(0,0,0,0.2)); -o-filter: invert(33%) sepia(89%) hue-rotate(95deg) saturate(255%) drop-shadow(4px 4px 7px rgba(0,0,0,0.2)); -ms-filter: invert(33%) sepia(89%) hue-rotate(95deg) saturate(255%) drop-shadow(4px 4px 7px rgba(0,0,0,0.2)); filter:invert(33%) sepia(89%) hue-rotate(95deg) saturate(255%) drop-shadow(4px 4px 7px rgba(0,0,0,0.2)); } .uiicon-filter-darkgreen-dropshadow:hover { -webkit-filter: invert(33%) sepia(89%) hue-rotate(95deg) saturate(255%) drop-shadow(0px 0px 7px rgba(0,0,0,0.5)); -moz-filter: invert(33%) sepia(89%) hue-rotate(95deg) saturate(255%) drop-shadow(0px 0px 7px rgba(0,0,0,0.5)); -o-filter: invert(33%) sepia(89%) hue-rotate(95deg) saturate(255%) drop-shadow(0px 0px 7px rgba(0,0,0,0.5)); -ms-filter: invert(33%) sepia(89%) hue-rotate(95deg) saturate(255%) drop-shadow(0px 0px 7px rgba(0,0,0,0.5)); filter:invert(33%) sepia(89%) hue-rotate(95deg) saturate(255%) drop-shadow(0px 0px 7px rgba(0,0,0,0.5)); cursor:pointer; } .icon1 { background-image: url("https://i.imgur.com/PGy70kn.png"); background-image:url("https://i.imgur.com/PGy70kn.png"),none; background-position: top left; background-repeat: no-repeat; width: 200px; height: 50px; } 

 <div class="uiicon icon1 uiicon-filter-darkgreen-dropshadow"></div> 

Answer 1

IE9中已弃用-ms-filter的支持，而在IE10中将其完全删除。

Answer 2

您可以使用头部中的以下meta元素将IE10设置为使用IE9标准模式呈现：

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

这将重新打开对旧版IE过滤器的支持。 但是，它具有将IE置于IE9模式的副作用，在该模式下，将不再支持IE10的最新功能。 就您而言，您当前可能不需要这些新功能，但是如果您走这条路，则在将来更新站点时需要了解它。

来自： IE 10的CSS过滤器灰度图像