JS polyfill CSS子选择器到IE6答案

【问题标题】：JS polyfill CSS child selector to IE6JS polyfill CSS子选择器到IE6
【发布时间】：2012-04-09 05:06:50
【问题描述】：

我正在寻找一个 polyfill 来将 > 选择器添加到 IE6。我知道 Selectivizr，但我不想将其全部包含在该规则中。是否有任何简单的脚本可以做到这一点？我有 jQuery，所以可以包括在内。

【问题讨论】：

Selectivizr 甚至没有提到对任何组合器的支持，所以我怀疑它是否会起作用，奇怪的是。确实工作并且确实有一大堆臃肿的是IE7.js
您可以使用以下规则集模拟子选择器：parent child {style:value;} parent * child {style:default-value}。
看看 jquery 源代码，他们是如何在 ie6 中获得 > 的。或者你可以改变你的标记，为这些子元素引入一些类，然后忘记所有的压力。
@Rocket 不幸的是，有些人在公司环境中工作，其中 25% 的工作站仍然装有 IE6
@Christoph 实际的选择器引擎是Sizzle，实现可以在at line 425 in the source code找到。

【解决方案1】：

无论浏览器如何，jQuery 都可以与子选择器一起使用。因此，您可以使用 jQuery 在页面加载时手动将样式应用为类。

jQuery('parent>child').addClass('parent-child-class');

【讨论】：

【解决方案2】：

.example * {background: #00f; }
.example * * {background: none; }

这将产生类似于：

.example > * {background: #00f; }

但要小心选择器的特殊性。

更有用的方法是通过 JavaScript/jQuery 为 IE6 添加额外的类：

$('.example > *').addClass('example-child');

【讨论】：

【解决方案3】：

我所知道的用于执行此类操作的旧 IE 版本的唯一其他 polyfill 是 Dean Edwards' IE7.js library。（以及后续库ie8.js和ie9.js）。

IE7.js 是一个在 IE6 是当前版本时发布的库。它的目的是尽可能多地填充 IE6 中缺少的新浏览器中可用的功能。它被称为“IE7.js”，以表达“在微软没有发布新版本的情况下，这是我试图迫使 IE 达到现代标准”。

IE8.js 和 IE9.js 分别在 IE7 和 IE8 发布后不久发布。

IE7.js 确实包含许多 IE6 缺少的 CSS 功能的 polyfill，包括 > 选择器。

如果您不想使用 Selectivizr，那么这是我所知道的唯一可以满足您需求的其他库。

希望对您有所帮助。

【讨论】：