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

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

先来看一个例子

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

  1. <style type="text/css">
  2. p:before {
  3. content: "before";
  4. }
  5. p:after {
  6. content: "after";
  7. }
  8. </style>
  9. <p> devdo </p>

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

在IE6中显示结果为

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

使用方法

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

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

二、修改css

在你需要使用的html标签中加入before,after属性。

如通常p:before{content: “before”;},要在p标签中加入{before: ‘before';after: “after”;},如不明白请看下面示例代码。

  1. p:before,p {
  2. content: "before";
  3. before: 'before';
  4. }
  5. p:after,p {
  6. content: "after";
  7. after: "after";
  8. }
  9. <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
  10. <script type="text/javascript" src="jquery.pseudo.js"></script>
  11. <p> devdo </p>

在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”;},全部示例看下面代码。

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

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

在IE6中显示结果为

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

解决IE6/IE7/IE8不支持before,after问题的更多相关文章

  1. 让IE6/IE7/IE8浏览器支持CSS3属性

    让IE6/IE7/IE8浏览器支持CSS3属性 一.下载 您可以狠狠地点击这里:ie-css3.htc,这个玩意儿是让IE浏览器支持CSS3表现的关键东东. 二.上面的是什么东西 首先说说.htc文件 ...

  2. 如何让低版本的IE浏览器(IE6/IE7/IE8)支持HTML5 header等新标签

    html5提供的一些新标签(article,aside,dialog,footer,header,section,footer,nav,figure,menu)使用起来非常的方便,但是低版本的IE浏览 ...

  3. IE(IE6/IE7/IE8)支持HTML5标签

    让IE(ie6/ie7/ie8)支持HTML5元素,我们需要在HTML头部添加以下JavaScript,这是一个简单的document.createElement声明,利用条件注释针对IE来调用这个j ...

  4. IE(IE6/IE7/IE8)支持HTML5标签--20150216

    让IE(ie6/ie7/ie8)支持HTML5元素,我们需要在HTML头部添加以下JavaScript,这是一个简单的document.createElement声明,利用条件注释针对IE来调用这个j ...

  5. (转)让IE6/IE7/IE8浏览器支持CSS3属性

    原文链接 http://blog.csdn.net/h5_queenstyle12/article/details/50437442 一.下载 搜索下载:ie-css3.htc,它是让IE浏览器支持C ...

  6. 让IE6/IE7/IE8支持CSS3属性的8种方法介绍

    我们都知道,IE浏览器暂不支持CSS3的一些属性.国外的工程师们,不安于此现状,他们总是尽量使用一些手段使IE浏览器也能支持CSS3属性,我觉得这些都是很有意义,很有价值的工作,可以推动整个技术领域的 ...

  7. 让IE6/IE7/IE8支持HTML5标签的js代码

    让IE(ie6/ie7/ie8)支持HTML5元素,我们需要在HTML头部添加以下JavaScript,这是一个简单的document.createElement声明,利用条件注释针对IE来调用这个j ...

  8. CSS兼容IE6 IE7 IE8 IE9 Firefox的总结

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法--(转)

    如有雷同,不胜荣幸,若转载,请注明 让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法 最近做一个Web网站,之前一直觉得bootstrap非常好,这次使用了boot ...

随机推荐

  1. QT特供 CGAL配置流程(基于QT5+VS2015)

    最近做的QT项目涉及计算几何库,需要用到CGAL,其配置着实麻烦,而且相互关联的软件也存在版本兼容一类的问题,在这里就对其配置流程做一些整理说明,以便后来者能够少些烦恼.(注:以下使用Win10作说明 ...

  2. Debian-based Linux distributions 安装 virtualbox

    Add the following line to your /etc/apt/sources.list: deb http://download.virtualbox.org/virtualbox/ ...

  3. web项目中各种路径的获取

    以工程名为/DemoWeb为例: 访问的jsp为:http://localhost:8080/DemoWeb/test/index.jsp 1 JSP中获得当前应用的相对路径和绝对路径 (1)得到工程 ...

  4. 无线连接Android设备

    有时设备处于低电,此时又需要进行设备与PC的数据传输,但是通过USB连接充电速度太慢.这时就可以通过无线进行传输数据,然后通过AC充电.一举两得. 前提: 1.在Android设备的开发者模式-打开U ...

  5. ajaxFileupload多文件上传

    最近有个功能模块需要上传图片,为了和之前的伙伴们保持一致我也使用了ajaxFileupload, 但是源码只支持单文件上传,所以百般斟酌之下决定修改源码,废话不多说直接上代码 HTML上传代码段: & ...

  6. 使用Word 2013发布cnblogs随笔

    博客园支持Word或者OneNote一键发布文章. 获取cnblogs的URL地址,类似http://rpc.cnblogs.com/metaweblog/your_name 打开word中的管理账户 ...

  7. PPT演示快捷键

    序号  快捷键作用  快捷键 1  从头开始放映  Ctrl+F5 2  从当前页开始放映  Shift+F5 3  隐藏/显示鼠标指针  Ctrl+H/U 4  标记笔  Ctrl+P 5  荧光笔 ...

  8. .NET 缓存模块设计

    上一篇谈了我对缓存的概念,框架上的理解和看法,这篇承接上篇讲讲我自己的缓存模块设计实践. 基本的缓存模块设计 最基础的缓存模块一定有一个统一的CacheHelper,如下: public interf ...

  9. ExtJs服务器端代理(Ajax)

    服务器端代理: Ajax:在当前域中发送请求 JsonP:跨域的请求 Rest:与服务器进行RESTful(GET/PUT/POST/DELETE)交互 Direct:使用  Ext.direct.M ...

  10. 基于Docker快速搭建多节点Hadoop集群--已验证

    Docker最核心的特性之一,就是能够将任何应用包括Hadoop打包到Docker镜像中.这篇教程介绍了利用Docker在单机上快速搭建多节点 Hadoop集群的详细步骤.作者在发现目前的Hadoop ...