0

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

1 回答 1

0

你的想法行不通

条件语句的重点是在使用svg背景定义filter渐变以及旧版本 IE 的渐变时覆盖 IE9（例如，参见这个 SO question）。

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

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

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

选择*器具有0特异性。它影响所有元素，但没有任何力量。因此它不能覆盖级联中的任何其他选择器，也不能通过蛮力覆盖。从本质上讲，在您的情况下，除了已经没有定义过滤器的集合元素之外，它不会做任何事情，从而为已定义的那些（包括您的渐变代码）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 覆盖过滤器调用的每个实例（无论它是什么类型的过滤器），那么您可以id在htmlorbody元素上设置一个，并使用条件注释进行重载选择（使用事实“允许重复出现相同的简单选择器并且确实增加了特异性。”）。因此，假设您在id上设置了“myID” body，那么您可以在有条件的情况下执行此操作，以几乎保证覆盖任何filterIE9：

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

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

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

于 2013-10-18T14:06:53.553 回答