【问题标题】:css filter not applying in IE11css过滤器不适用于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 实现这一点。

【问题讨论】:

    标签: css internet-explorer bootstrap-4 cross-browser icons


    【解决方案1】:

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

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

    向前思考:因为你真的“只”使用 opacitydrop-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 及更高版本支持 opacitybox-shadow。如果您认为您可能会让用户运行旧版本的 IE,那么您可以按照 Brebber 所说的那样做,并通过 &lt;!--[if lte IE 8]&gt; 为旧版本的 Internet Explorer 使用条件样式表。
    • @RichDeBourke:谢谢指正……技术真的是很久以前的事了。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-07-23
    • 1970-01-01
    • 1970-01-01
    • 2015-08-08
    • 2020-07-29
    相关资源
    最近更新 更多