html - LESS 和 IE9 过滤器 :none for svg gradient compatibility?

Question

我正在使用 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]-->

Answer 1

你的想法行不通

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

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

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

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

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

解决方法最有可能成功

由于您不想在具有渐变的各种元素上设置单个类(可能是处理它的最简单方法)，而是要处理由 LESS 生成的可能包含渐变的各种选择器，您的将不得不通过扩展这些选择器的 CSS 来处理它。有多种方法可以做到这一点，有些方法可能仍然能够将它提供给一个条件，这样其他浏览器就看不到它，但是一个例子(所有浏览器都会选择)是计划在 IE9 中的 html 上设置一个类，然后执行此操作:

少

.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 上设置一个 id 或 body 元素，并使用条件注释(使用 "Repeated occurrances of the same simple selector are allowed and do increase specificity." 的事实)进行重载选择。因此，假设您在 body 上设置了“myID”的 id，那么您可以在有条件的情况下执行此操作，几乎可以保证覆盖任何 filter 对于 IE9:

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

我假设您的 LESS 中没有任何正常的选择器字符串，其特异性等于四个 id(无论如何我希望没有)。

这远非理想，但这是一种避免个别选择器覆盖的解决方法。