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

Mik*_*ter 7 html javascript css jquery class

tl; dr ="任何人都知道如何使用jQuery或类似的方法为IE6应用链式类?"

对,

也许我问不可能?我认为自己还算新Javscript和jQuery,但他这样说,我最近写了一些相当复杂的代码,所以我肯定到达那里......但我与一个颇为有趣的问题,在我目前的合同自由职业者现在possed.

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

<div class='blocks four-col-1 orange highlight'>Some content</div>
Run Code Online (Sandbox Code Playgroud)

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

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

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

.blocks.orange.highlight {background-colour:#dd00ff;}
Run Code Online (Sandbox Code Playgroud)

任何不熟悉这个特定bug的人都可以在这里阅读更多内容:http://www.ryanbrill.com/archives/multiple-classes-in-ie/这是非常真实且非常烦人的.

不想进入不链接课程的好处(我告诉他们这个,但不再可能改变他们的方法......将100个手工编码的页面改为150页的网站,没有CMS ...叹息)并且没有能够改变这些方块的风格的奢侈......任何人都可以告诉我下面提出的任何方法或可能充分解决这个问题的其他方案之间的复杂性和好处.

潜在解决方案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将要求companty中的某个人在每次进行更改时对新样式进行硬编码,如果不这样做,IE6将会中断.

具有讽刺意味的是,该网站虽然需要以有限的方式符合IE6,但不需要运行javascript(他们已经打电话......有JS或者离开),所以考虑所有的jQuery和JS解决方案都是'游戏上'.

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

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

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

问候,

麦克风.

编辑:添加tl; dr到顶部.

Bil*_*iam 4

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

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