首页 > web前端 > html/css/css3 > 解决IE6/IE7/IE8不支持before,after问题
网站建设、切图、企业建站、微信开发 联系QQ:404658186 tel:18716186715
2015
07-03

解决IE6/IE7/IE8不支持before,after问题

对从事web开发的朋友来讲,低版本的IE永远是一个痛点,不支持最新技术(如css3,html5)。

在现在web开发中使用图标字体已经很广泛,如Font Awesome,Bootstrap等,字体图片主要是通过css选择器before,after结合content来实现,但是在低版本的IE6/IE7/IE8中并不支持,下面就来探讨一下如何解决IE6/IE7/IE8不支持before,after问题。

先来看一个例子

这里重点演示IE6中效果,因为只要IE6实现的效果,更高版本的IE一般都可以实现。

<style type="text/css">
 p:before {
 content: "before";
 }
 p:after {
 content: "after";
 }
</style>
<p> devdo </p>

在chrome,firefox,opera中的显示结果为

QQ截图20150703084602

在IE6中显示结果为

QQ截图20150703084810

 

从上面的例子看出,IE6并不支持before、after,那么要如何让IE6支持呢,通常的方法是通过脚本来实现,jquery.pseudo.js就是用于解决IE6不支持before、after的一个方法。

使用方法

一、引入jquery,引用jquery.pseudo.js

<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery.pseudo.js"></script>

二、修改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";
 }
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery.pseudo.js"></script>
<p> devdo </p>

在chrome,firefox,opera中的显示结果为

QQ截图20150703090244

在IE6中显示结果为

QQ截图20150703090254

在IE6中的before,after已经显示出来,但是其中before后的空格没有体现出来,这个你可以通过before: “before “;后面加个空格来处理。

现在IE6已经实现before,after已经实现效果,有些同学就要问了,那图标字体呢,如何实现。

我们就拿大名鼎鼎的font-awesome来举例。

一般情况你只需要把font-awesome的类插入css中即可实现,但是对IE6这种奇葩,我们要多走一步。

通过chrome,firefox等浏览器的审核元素功能,查找图标字体的content值,如下图。

QQ截图20150703091149

我这里是微博图标,content值是”\f18a”,把需要使用的标签中加入before:”\f18a”,如下面i标签p i{before:”\f18a”;},全部示例看下面代码。

<style type="text/css">
body{padding:30px;}
 p i{before:"\f18a";}
</style>
<link rel="stylesheet" href="font-awesome-4.3.0/css/font-awesome.min.css">
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery.pseudo.js"></script>
<p> devdo <i class="fa fa-weibo"></i></p>

在chrome,firefox,opera中的显示结果为

QQ截图20150703091625

在IE6中显示结果为

QQ截图20150703091648

现在IE6的图标字体也实现了,更多功能等你发现。


下载密码:9hnm

最后编辑:
作者:码农一号
这个作者貌似有点懒,什么都没有留下。
捐 赠如果您觉得这篇文章有用处,请支持作者!鼓励作者写出更好更多的文章!

解决IE6/IE7/IE8不支持before,after问题》有 4 条评论

  1. jack 说:

    并没有什么用啊

  2. Soul 说:

    为什么我用这个方法在IE7中会添加不止一个的before或是after的内容呢?

留下一个回复

你的email不会被公开。

*