IE 6,7 中的 CSS :before/:after 选择器答案

【问题标题】：CSS :before/:after Selectors in IE 6,7IE 6,7 中的 CSS :before/:after 选择器
【发布时间】：2011-06-18 04:45:12
【问题描述】：

我知道 :before/:after 选择器在 IE 6,7 中不可用
http://www.quirksmode.org/css/contents.html

是否有 js hack 可以在 IE 中启用对这些选择器的支持？

【问题讨论】：

与该表所说的相反，IE8 确实支持:before 和:after。也许它只是不完全正确的支持。

标签： javascript html css css-selectors

【解决方案1】：

在尝试创建支持 IE 6 和 7 的 https://gist.github.com/1133433 时发现此问题。我曾尝试使用 CSS3 灵活框模型，但在使用带框的 CSS3 灵活框时遇到了 web-kit 中的错误-sizing：边框、填充和固定宽度。它打破了默认的框对齐：拉伸（等高）。要么是这样，要么是决定使用表格。

CSS3 Flexible Box 似乎很难控制。如果您想设置固定宽度，并获得 box-align: 拉伸以及设置内边距的好处，那么您就是 SOL。

【讨论】：

【解决方案2】：

使用 Jquery 你可以在任何你喜欢的地方加入支持，有点像这个金块

 /* fix top nav ui in ie6*/
if ($.browser.msie && $.browser.version <= 6 ) {
    $('#topNav ul li a:not(:last)').after("/");
}

【讨论】：

【解决方案3】：

有一个名为 IE7 的 Javascript 解决方案，它修复了常见的 IE 错误：http://code.google.com/p/ie7-js/

【讨论】：

一些较旧的 IE7.js modular 文件可在 reisio.com/temp/ie7-js 获得，其中包括 ie7-css2-selectors.js。
在该项目中，您需要使用 IE8.js 或 IE9.js 来支持 :before 和 :after，因为 Microsoft 将它们添加到 IE8，而不是 IE7。

【解决方案4】：

当然是 jQueries before 和 after

还有什么;)

【讨论】：

这是最好的方法！为什么我之前没有想到这一点。谢谢！

【解决方案5】：

我不知道它的效果如何；但快速搜索发现了一个有希望的结果：

http://jquery.lukelutman.com/plugins/pseudo/

CSS2 的 :before 和 :after 伪选择器真的很方便...... 但他们不能在互联网上工作探险家。不，甚至没有IE7。我打赌你在想：“但是如果我们使用尽可能多的专有 Microsoft 功能尽可能同时，那会显示他们的！” 你知道吗？你是绝对正确的。你刚刚一定会喜欢这个 - * { 行为：表达（...）; } — 可以（更多或 less) 启用 :before 和 :after for IE5.5+

在 jquery.pseudo.js 中您的文档，然后您可以执行以下操作：

p:before, p {
    before: 'foo';
    content: 'foo'; }

p:before, p .before {
    color: blue; }

【讨论】：

您是否注意到该页面上的“更新：2006 年 2 月 6 日”消息？
我做了，但是 IE7 已经存在了很长时间，所以我忽略了页面的年龄。