LESS 和 IE9 过滤器：无 svg 渐变兼容性？答案

【问题标题】：LESS and IE9 filter:none for svg gradient compatibility?LESS 和 IE9 过滤器：无 svg 渐变兼容性？
【发布时间】：2013-10-18 22:06:53
【问题描述】：

我正在使用 LESS 预处理器开发一个站点，并且想知道是否绝对有必要在条件过滤器覆盖中包含我应用渐变背景的每个类或元素以使 IE9 运行...

<!--[if gte IE 9]>
  <style type="text/css">
    .the-first-gradient-class{ filter: none; }
    .the-second-gradient-class{ filter: none; }

    ...

    .the-last-gradient-class{ filter: none; }
  </style>
<![endif]-->

由于 LESS 正在处理渐变，因此我不会在输出的 HTML 中添加特定的“渐变”类，这样做有点痛苦（而且我真的不想处理这个问题）。有什么东西阻止我说这样的话就完成了吗？

<!--[if gte IE 9]>
  <style type="text/css">
    * { filter: none; }
  </style>
<![endif]-->

【问题讨论】：

标签： html css internet-explorer svg less

【解决方案1】：

你的想法行不通

条件语句的重点是在使用 svg 背景定义的渐变以及旧版本 IE (see for example this SO question) 的 filter 渐变时覆盖 IE9。

要让 IE9 正确使用 svg，需要将其设置为覆盖为早期版本设置的过滤器。这通常是通过使用 css 的 cascade 来重置过滤器来完成的，因此为什么在定义渐变的原始 css 之后的条件注释中使用相同的选择器名称。后面的 IE9 css 将自动使用，因为它是同一个选择器，但在级联中稍后出现。

第二种方法是让 IE9 条件的选择器比任何应用的梯度选择器具有更高的特异性。但是，由于您只是在 LESS 中使用各种选择器，这将是具有挑战性的，但并非无法克服。

那么为什么你的想法行不通

The * selector is of 0 specificity。它影响所有元素，但没有任何力量。因此它不能覆盖级联中的任何其他选择器，也不能通过蛮力覆盖。从本质上讲，在您的情况下，除了设置已经没有定义过滤器以在其上设置 filter: none 的元素外，它什么也不做，为已定义的那些保留所有其他 filter 代码（包括您的渐变代码)。

最有可能成功解决问题

由于您不想在具有渐变的各种元素上设置单个类（可能是处理它的最简单方法），而是处理由 LESS 生成的可能包含渐变的各种选择器，因此您的必须通过扩展这些选择器的 CSS 来处理它。有多种方法可以做到这一点，其中一些可能仍然能够将其输入条件，因此其他浏览器看不到它，但一个示例（所有浏览器都会选择）是计划在html IE9 中设置一个类，然后执行以下操作：

少

.someClass {
  filter: gradientFilter;
  .ie9resetFilter();
}

.someOtherClass {
  filter: gradientFilter;
  .ie9resetFilter();
}

.ie9resetFilter() {
  html.ie9 & {
    filter: none;
  }
}

CSS 输出

.someClass {
  filter: gradientFilter;
}
html.ie9 .someClass {
  filter: none;
}
.someOtherClass {
  filter: gradientFilter;
}
html.ie9 .someOtherClass {
  filter: none;
}

如果您没有在 IE9 中对其他任何内容使用过滤器，那么...

如果您不关心为 IE9 覆盖过滤器调用的每个实例（无论它是什么类型的过滤器），那么您可以在 html 或 body 元素上设置一个 id，并使用条件 cmets 进行重载选择（使用 "Repeated occurrances of the same simple selector are allowed and do increase specificity." 的事实）。因此，假设您在body 上设置了“myID”的id，那么您可以在有条件的情况下执行此操作，以几乎保证覆盖 IE9 的任何filter：

<!--[if gte IE 9]>
  <style type="text/css">
    #myID#myID#myID#myID * { filter: none; } /* specificity is 400 */
  </style>
<![endif]-->

我假设您的 LESS 中没有任何普通的选择器字符串，其特异性等于四个 id（我希望不会）。

这远非理想，但可以避免个别选择器被覆盖。

【讨论】：