css过滤器不适用于IE11

Posted 2023-03-06

【中文标题】css过滤器不适用于IE11

【英文标题】：css filter not applying in IE11

【发布时间】：2021-07-07 05:15:42

【问题描述】：

要为 bootstrap 2.3.2 图标应用颜色，我在 CSS 中使用 filter 属性。 这适用于除 IE11 以外的所有浏览器。

.apply-color 
    filter: opacity(0.5) drop-shadow(0 0 0 blue);

我们如何为 IE 实现这一点。

【参考方案1】：

IE 11 根本不支持filter：https://caniuse.com/?search=filter。

对于像“灰度”这样的过滤技术有不同的 JS polyfils，但我不确定是否有一种更简单的特殊设置适合你。

向前思考：因为你真的“只”使用 opacity 和 drop-shadow 在这种情况下你不需要 filter ...

IE11 支持：

opacity box-shadow

... 这样您就可以在没有过滤器的情况下实现您的样式。如果您真的需要为 8 年以前且长期过时（几乎）未使用的 IE11 提供支持：只需将 IE11 传统的特殊设置包装到单独的 IE11 样式表中，并将其包含到您的 html 中（请参阅下面的更新强>):

<!--[if IE 11]>
  <link href="ie11.css" rel="stylesheet" type="text/css">
<![endif]-->

---

更新

根据 Rich DeBourke 下面的评论：IE11 不支持条件 cmets。以下是指向该点的其他链接（很久以前）：

有关条件 cmets 的信息：https://www.sitepoint.com/internet-explorer-conditional-comments/

有关为包括 IE11 在内的旧 IE 版本编写特殊 CSS 的信息：How to write a CSS hack for IE 11?https://paper-leaf.com/insights/targeting-ie-10-11-browsers-css/

【讨论】：

IE 10 和 11 不支持条件 cmets（根据Sitepoint.com 上的这篇文章）。根据 CanIUse.com，IE 9 及更高版本支持 opacity 和 box-shadow。如果您认为您可能会让用户运行旧版本的 IE，那么您可以按照 Brebber 所说的那样做，并通过 <!--[if lte IE 8]> 为旧版本的 Internet Explorer 使用条件样式表。

@RichDeBourke：谢谢指正……技术真的是很久以前的事了。