IE 中不显眼的伪类和属性选择器模拟答案

【问题标题】：Unobstrusive pseudo-classes and attribute selectors emulation in IEIE 中不显眼的伪类和属性选择器模拟
【发布时间】：2010-05-04 09:53:10
【问题描述】：

我正在尝试在 Internet Explorer 6 和 7 中模拟一些伪类和属性选择器，例如 :focus、:hover 或 [type=text]。到目前为止，我已经设法为受影响的元素添加了一个类名：

$("input, textarea, select")
.hover(function(){
    $(this).addClass("hover");
}, function(){
    $(this).removeClass("hover");
})
.focus(function(){
    $(this).addClass("focus");
})
.blur(function(){
    $(this).removeClass("focus");
});

$("input[type=text]").each(function(){
    $(this).addClass("text");
});

但是，我仍然不得不在样式表中复制选择器：

textarea:focus, textarea.focus{
}

而且，更糟糕的是，IE6 在找到属性时似乎会忽略所有选择器：

input[type=text], input.text{
    /* IE6 ignores this */
}

当然，IE6 会忽略具有多个类的选择器：

input.text.focus{
    /* IE6 ignores this */
}

所以我很可能会陷入这种混乱：

input[type=text]{
    /* Rules here */
}
input.text{
    /* Same rules again */
}
input[type=text]:focus{
}
input.text_and_focus{
}
input.text_and_hover{
}
input.text_and_focus_and_hover{
}

我的问题：有没有办法读取为 CSS 选择器定义的规则或计算样式并将其应用于某些元素，所以我只需要维护一组标准 CSS？

【问题讨论】：

标签： javascript jquery css internet-explorer

【解决方案1】：

如果您的样式已经依赖于 javascript（否则，:focus 或 .focus 在 IE6 中都不起作用），我建议您使用 Dean Edwards 的 IE7.js，它可以增强 ie6。

http://code.google.com/p/ie7-js/

【讨论】：

几年前我使用过那个库，这有点矫枉过正。它的执行速度非常慢，因为它非常雄心勃勃：它修复了渲染错误并模拟了许多我并不真正需要的 CSS3 东西。考虑到我已经在使用 jQuery 来实现站点功能，我想糟糕的 IE6 将无法应对它。无论如何，谢谢你的提示。我以为 IE7 被抛弃了，我很高兴看到它没有。
我之前使用过IE7.js 和jQuery，如果您的服务器不是很慢，它可以正常工作 - 我的意思是，您的工作量较少，您的网站“大部分”与 IE6 兼容并且世界又美好了:)

【解决方案2】：

我发现了这个可爱的软件：

ie-css3.js Internet Explorer 5.5 - 8 的 CSS3 伪类选择器仿真

它基本上涵盖了我的要求（不需要特定 CSS 规则的不显眼的代码），尽管它不模仿 input[type=text]。

如果您知道这一行的其他内容，请随时添加新答案。

【讨论】：