javascript - 在 IE6 中链接 CSS 类 - 试图找到一个 jQuery 解决方案？

Question

tl;dr = “有人知道如何使用 jQuery 或类似工具为 IE6 应用链式类吗？”

没错，

也许我问不可能？我认为自己对 Javscript 和 jQuery 还很陌生，但话虽这么说，我最近写了一些相当复杂的代码，所以我肯定能达到目标……但是我现在在我当前的自由契约(Contract)中遇到了一个相当有趣的问题。

之前的 Web 编码器对 HTML 采用了 Grid-960 方法，因此使用链式类来设置许多元素的样式。以下示例是代码中的典型示例:

<div class='blocks four-col-1 orange highlight'>Some content</div>

并且在 css 中会有不同的声明:(不是实际的 css...但足够接近)

.blocks {margin-right:10px;}
.orange {background-image:url(someimage.jpg);}
.highlight {font-weight:bold;}
.four-col-1 {width:300px;}

更糟糕的是...这是在 CSS 中:

.blocks.orange.highlight {background-colour:#dd00ff;}

任何不熟悉此特定错误的人都可以在此处阅读更多信息:http://www.ryanbrill.com/archives/multiple-classes-in-ie/这是非常真实也非常烦人的。

不想深入了解不链接类的优点(我告诉他们这个，但改变他们的方法不再可行......将 100 个手工编码的页面变成一个 150 页的网站，没有 CMS......叹息)并且没有能够改变这些 block 的样式方式的奢侈......任何人都可以就我下面提出的任何方法或可以充分解决此问题的其他可能选项之间的复杂性和好处向我提出建议。

潜在解决方案 1

使用条件注释我正在考虑只为 IE6 加载一个 jquery 脚本:

1. 读取页面特定部分的所有div的类并推送到一个数组
2. 在屏幕外创建空框，一次只应用其中一个类
3. 读取每个框应用的 CSS 值
4. 将这些样式重新应用到单个框，以某种方式牢记调用它们的顺序并根据需要覆盖冲突的指令

潜在解决方案 2

1. 读取页面某部分的所有div的类并推送到一个数组
2. 扫描文档以获取指向样式表的链接
3. Ajax 抓取样式表并遍历查找与类数组中的名称匹配的名称
4. 根据需要应用样式

可能的解决方案 3

1. 创建一个仅适用于 IE6 的样式表，其中包含要作为唯一名称应用的确切样式(即:class='blocks orange highlight' 变为 class='blocks-orange-highlight')
2. 在 IE6 中遍历文档并将类声明中的所有空格转换为连字符并根据新样式名称重新应用类

总结:

解决方案 1 允许该公司的人员在未来应用任何样式，脚本将根据需要进行调整。然而，它不允许添加链接样式，只能添加单个样式......它也是处理器密集型和耗时的，但也最有可能转换成可以在世界范围内使用的插件

解决方案 2 是编码的潜在噩梦。但是再次将允许无限次更新而不会中断

解决方案 3 将要求公司的某个人在每次进行更改时都对新样式进行硬编码，如果他们不这样做，IE6 就会崩溃。

具有讽刺意味的是，该网站虽然需要以有限的方式符合 IE6，但不需要在没有 javascript 的情况下运行(他们已经做出决定......拥有 JS 或离开)，因此请考虑所有 jQuery 和 JS 解决方案开始“游戏”。

我有没有提到我有多讨厌 IE6？

无论如何...任何想法或意见将不胜感激。

我会继续开发我自己的解决方案，如果我发现一个可以变成 jQuery 插件的解决方案，我会在评论中发布。

问候，

迈克。

编辑:将 tl;dr 添加到顶部。

Answer 1

这是一个组合解决方案:http://code.google.com/p/ie7-js/

修复了多类错误和您可能遇到的其他一些选择器问题。