对从事web开发的朋友来讲，低版本的永远是一个痛点，不支持最新技术(如css3,html5)。
在现在web开发中使用图标字体已经很广泛，如Font Awesome,Bootstrap等，字体图片主要是通过css选择器before,after结合content来实现，但是在低版本的IE6/IE7/IE8中并不支持，下面就来探讨一下如何解决IE6/IE7/IE8不支持before,after问题。
先来看一个例子
这里重点演示IE6中效果，因为只要IE6实现的效果，更高版本的IE一般都可以实现。
devdo
在chrome，firefox，opera中的显示结果为
在IE6中显示结果为
从上面的例子看出，IE6并不支持before、after，那么要如何让IE6支持呢，通常的方法是通过脚本来实现，jquery.pseudo.js就是用于解决IE6不支持before、after的一个方法。
使用方法
一、引入jquery，引用jquery.pseudo.js
二、修改css
在你需要使用的html标签中加入before，after属性。
如通常p:before{content: “before”;}，要在p标签中加入{before: ‘before';after: “after”;}，如不明白请看下面示例代码。
p:before,p {
content: "before";
before: 'before';
}
p:after,p {
content: "after";
after: "after";
}
devdo
在chrome，firefox，opera中的显示结果为
在IE6中显示结果为
在IE6中的before，after已经显示出来，但是其中before后的空格没有体现出来，这个你可以通过before: “before “;后面加个空格来处理。
现在IE6已经实现before，after已经实现效果，有些同学就要问了，那图标字体呢，如何实现。
我们就拿大名鼎鼎的font-awesome来举例。
一般情况你只需要把font-awesome的类插入css中即可实现，但是对IE6这种奇葩，我们要多走一步。
通过chrome，firefox等浏览器的审核元素功能，查找图标字体的content值，如下图。
我这里是微博图标，content值是”\f18a”，把需要使用的标签中加入before:”\f18a”，如下面i标签p i{before:”\f18a”;}，全部示例看下面代码。
devdo
在chrome，firefox，opera中的显示结果为
在IE6中显示结果为
现在IE6的图标字体也实现了，更多功能等你发现。
下载jquery.pseudo.js
转载请注明：前端录»解决IE6/IE7/IE8不支持before,after问题
