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背景定义渐变以及旧版IE（see for example this SO question）的filter渐变时覆盖IE9。

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

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

为什么你的想法不起作用

The * selector is of 0 specificity。它影响所有元素，但不影响任何力量。所以它不能覆盖级联中的任何其他选择器，也不能暴力。基本上，在您的情况下，它除了设置已经没有定义过滤器的元素之外什么都不做，为它们设置filter: none，保留所有其他filter代码用于已定义的代码（包括你的渐变代码）。

最有可能成功解决

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

<强> LESS

.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覆盖过滤器调用的每个实例（无论它是什么类型的过滤器），那么您可以在id上设置html或{ {1}}元素，并使用条件注释（使用"Repeated occurrances of the same simple selector are allowed and do increase specificity."的事实）进行重载选择。因此，假设您在body上设置了id“myID”，那么您可以在有条件的情况下执行此操作，几乎可以保证覆盖IE9的任何body：

filter

我假设你的LESS中没有任何正常的选择器字符串，其特异性等于4个id（我希望不会这样）。

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

LESS和IE9过滤器：没有svg梯度兼容性？

1 个答案:

你的想法不起作用