CSS3 过滤器不适用于 ie 10 中的元素答案

【问题标题】：CSS3 filter not working on element in ie 10CSS3 过滤器不适用于 ie 10 中的元素
【发布时间】：2015-08-10 22:33:17
【问题描述】：

我有以下 sn-p，它适用于除（大惊喜）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;
}

&lt;div class="uiicon icon1 uiicon-filter-darkgreen-dropshadow"&gt;&lt;/div&gt;

【问题讨论】：

请注意，您应该在前缀行之后有无前缀属性last。
想详细说明为什么？这是我第一次听到。
尽管它们看起来相同，但前缀版本可能无法实现 w3c 预期的行为。因此，最好最后设置无前缀版本以覆盖任何供应商前缀的实现。这是一个很好的阅读示例：css-tricks.com/ordering-css3-properties

标签： css internet-explorer

【解决方案1】：

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

【讨论】：

好的，但它也不遵守过滤器。它至少应该听过滤器。您有其他方法可以让 css3 正常工作吗？
IE 不支持 CSS 过滤器：caniuse.com/#search=CSS%20filter 我不记得是否有用于此的 polyfill。
不，没有用于 hue-rotate 的 polyfill。据我所知。
这是正确的答案，应该被@Tschallacka 接受。 IE 不支持任何过滤器。没有通过 CSS 的 polyfill 或变通方法。让它工作的唯一方法是通过服务器端脚本或 Javascript 库。

【解决方案2】：

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

发件人：CSS filter grayscale image for IE 10

【讨论】：

嗯，这不是我想要的……我不得不修补各种东西来支持像 String.startsWith 这样的东西。我不想修补 IE9 中缺少的 css 功能……那会完全破坏我的应用程序。如果您运行它，我的脚本会执行黑白图像并通过 css3 过滤器将其转换为彩色图像。它适用于所有浏览器...除了蓝色浏览器。
“它适用于除 IE 之外的所有浏览器”。这对我来说是一个快捷的评论键。