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

Support for -ms-filter was deprecated in IE9 and removed entirely in IE10.

Answer 2

您可以使用IE设置IE10以使用IE9标准模式进行渲染关注元素：
<meta http-equiv="X-UA-Compatible" content="IE=9">
这将为旧版IE过滤器重新启用支持。但是，它有将IE放入IE9模式的副作用，其中最新的将不再支持IE10的进步。在你的情况下它可能您可能目前不需要这些新功能，但是如果你走这条路，你需要在更新时注意它将来的网站。

来自：CSS filter grayscale image for IE 10

CSS3过滤器不在10中的元素上工作

2 个答案: