在IE6中链接CSS类 - 试图找到一个jQuery解决方案？ [英] Chaining CSS classes in IE6 - Trying to find a jQuery solution?

问题描述

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

右，

也许我问不可能的事？我认为自己对Javscript和jQuery是相当新的，但是据说，我最近编写了一些相当复杂的代码，所以我肯定会到那里...但是我现在在我目前的自由职业合同有一个有趣的问题。 p>

以前的网络编码器采用了Grid-960方法处理HTML，因此使用链接类来对许多元素进行样式化。下面的例子是典型的代码：

 < div class ='blocks four-col-1橙色高亮>部分内容< / div> 
  

在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-color：＃dd00ff;} 
  

任何人不熟悉特定的错误可以在这里阅读更多： 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. 扫描文档以获取样式链接




4. 可以根据需要应用样式



潜在解决方案3



1. 创建IE6只有样式表包含要应用为唯一名称的确切样式（即：class ='blocks orange highlight'变为class ='blocks-orange-highlight'）


2. 在IE6中遍历文档并将类声明中的所有空格转换为连字符，并根据新样式名称重新应用类别



摘要：





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





解决方案2是一个潜在的噩梦代码。





解决方案3将需要companty中的某人在每次进行更改时对新样式进行硬编码，如果他们不要，IE6会破坏。





讽刺的是，网站，同时需要符合IE6有限的方式，不需要运行wihtout javascript（他们已经调用...有JS或走了），所以考虑所有的jQuery和JS解决方案是游戏。





我提到我有多讨厌IE6？





无论如何，任何想法或评论都会感激。





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





注意，


$ b $
h2_lin>解决方案

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

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

tl;dr = "Anyone know how to apply chained classes for IE6 using jQuery or similar?"

Right,

perhaps I ask the impossible? I consider myself fairly new to Javscript and jQuery, but that being said, I have written some fairly complex code recently so I am definitely getting there... however I am now possed with a rather interesting issue at my current freelance contract.

The previous web coder has taken a Grid-960 approach to the HTML and as a result has used chained classes to style many of the elements. The example below is typical of what can be found in the code:

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

And in the css there will be different declarations for: (not actual css... but close enough)

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

and to make matters worse... this is in the CSS:

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

Anyone not familiar with this particular bug can read more on it here: http://www.ryanbrill.com/archives/multiple-classes-in-ie/ it is very real and very annoying.

Without wanting to go into the merrits of not chaining classes (I told them this, but it is no longer feasible to change their approach... 100 hand coded pages into a 150 page website, no CMS... sigh) and without the luxury of being able to change the way these blocks are styled... can anyone advise me on the complexity and benefits between any of my below proposed approaches or possible other options that would adequately solve this problem.

Potential Solution 1

Using conditional comments I am considering loading a jquery script only for IE6 that:

1. Reads the class of all divs in a certain section of the page and pushes to an array
2. creates empty boxes off screen with only one of the classes applied at a time
3. Reads the applied CSS values for each box
4. Re-applies these styles to the individual box, somehow bearing in mind the order in which they are called and overwriting conflicting instructions as required

Potential Solution 2

1. read the class of all divs in a certain section of the page and push to an array
2. Scan the document for links to style sheets
3. Ajax grab the stylesheets and traverse looking for matching names to those in class array
4. Apply styles as needed

Potential Solution 3

1. Create an IE6 only stylesheet containing the exact style to be applied as a unique name (ie: class='blocks orange highlight' becomes class='blocks-orange-highlight')
2. Traverse the document in IE6 and convert all spaces in class declarations to hyphens and reapply classes based on new style name

Summary:

Solution 1 allows the people at this company to apply any styles in the future and the script will adjust as needed. However it does not allow for the chained style to be added, only the individual style... it is also processor intensive and time consuming, but also the most likely to be converted into a plugin that could be used the world over

Solution 2 is a potential nightmare to code. But again will allow for an endless number of updates without breaking

Solution 3 will require someone at the companty to hardcode the new styles every time they make a change, and if they don't, IE6 will break.

Ironically the site, whilst needing to conform to IE6 in a limited manner, does not need to run wihtout javascript (they've made the call... have JS or go away), so consider all jQuery and JS solutions to be 'game on'.

Did I mention how much i hate IE6?

Anyway... any thoughts or comments would be appreciated.

I will continue to develop my own solution and if I discover one that can be turned into a jQuery plugin I will post it here in the comments.

Regards,

Mike.

edit: added tl;dr to the top.

解决方案

Here's a combination solution: http://code.google.com/p/ie7-js/

Fixes the multiple class bug and some other selector issues you may encounter.

这篇关于在IE6中链接CSS类 - 试图找到一个jQuery解决方案？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！