Iconfont在IE7下需要使用unicode方式,但是这种方式不太方便,使用以下代码可使IE7像普通用法使用。

@font-face {font-family: "anticon";
src: url('/font/iconfont/iconfont.eot'); /* IE9*/
src: url('/font/iconfont/iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('/font/iconfont/iconfont.woff') format('woff'), /* chrome, firefox */
url('/font/iconfont/iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('/font/iconfont/iconfont.svg#anticon') format('svg'); /* iOS 4.1- */
}
.anticon {
font-family:"anticon" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
} .icon-codepen {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-home {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-menu-fold {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-menu-unfold {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-doubleleft {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
.icon-doubleright {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}

把所有的需要用的图标做一份,以后就可以直接使用了,另外在IE7下使用ToogleClass切换Icon不起作用,扩展Jquery方法如下

//扩展ToggleClass支持IE7
$.fn.extend({
toggleClassIE7:function(p_para1,p_para2){
if(/MSIE 7.0/ig.test(navigator.appVersion)) {
var $clone = $(this).clone(true);
if($clone.hasClass(p_para1)) {
$clone.addClass(p_para2).removeClass(p_para1);
} else {
$clone.addClass(p_para1).removeClass(p_para2); }
$(this).after($clone);
$(this).remove(); } else {
$(this).toggleClass(p_para1+" "+p_para2);
}
}
});

使用的地方用toggleClassIE7即可。总体上ie7坑太多,还是建议放弃支持为好。

IE7下使用兼容Icon-Font CSS类的更多相关文章

  1. 0c-42-ARC模式下如何兼容非ARC的类

    1.ARC模式下如何兼容非ARC的类 让程序兼容ARC和非ARC部分.转变为非ARC -fno-objc-arc 2.将MRC转换为ARC ARC也需要考虑循环引用问题:一端用strong,一端用we ...

  2. 1.ARC模式下如何兼容非ARC的类

    ARC模式下如何兼容非ARC的类 :转变为ARC的, -f-objc-arc 非ARC模式下如何兼容ARC的类 :转变为非ARC -fno-objc-arc

  3. Angular 1.2.27在IE7下的兼容问题

    最近负责公司的一个国外项目,老外指定要用angular,并且要兼容到IE7. 项目使用的是Angular版本是1.2.27,为了能在IE7下跑,需要做如下配置 1. 加载json2.js 2. 加载h ...

  4. jquery解析XML在IE7下不兼容的问题

    jquery在解析XML内容的时候在IE7下无法显示,是因为数据格式的问题,解决办法如下: $.ajax({        type:"POST",        url:&quo ...

  5. CSS Sprites+CSS3 Icon Font

    CSS Sprites+CSS3 Icon Font CSS Sprites在国内很多人叫CSS精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来, ...

  6. DIV+CSS IE6/IE7/IE8/FF兼容问题汇总

    1.IE8下兼容问题,这个最好处理,转化成ie7兼容就可以.在头部加如下一段代码,然后只要在IE7下兼容了,IE8下面也就兼容了 <meta http-equiv="x-ua-comp ...

  7. DIV+CSS IE6/IE7/IE8/FF兼容问题大全

    1. [代码][CSS]代码 1, FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会.(可用!important解决) 2, 居中问题. 1).垂直居 ...

  8. IE6/IE7下margin-bottom失效兼容解决办法及双倍边距问题

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-04-08) 一.IE6/IE7下margin-bottom失效兼容解决办法 1.用padding-bottom代替:2.在 ...

  9. 兼容IE6,IE7和firefox可以使用的一些css hack:

    .一些问题是浏览器自身的问题,遇到问题发生无法避免的情况下,那就要考虑使用一些css hack了,以下是针对IE6,IE7和firefox可以使用的一些css hack:(1) a: 针对区别IE6 ...

随机推荐

  1. sqlserver 2014使用时有Cannot find one or more components

    好久没用sqlserver,今天打开却出现了一个错误,Cannot find one or more components,令人头疼.在启动Microsoft SQL Server Managemen ...

  2. iBatis第二章:搭建一个简单的iBatis开发环境

    使用 iBatis 框架开发的基本步骤如下:1.新建项目(iBatis是持久层框架,可以运用到java工程或者web工程都可以) 这里我们建立一个 web 工程测试. 2.导入相应的框架 jar 包 ...

  3. SQLServer更改用户定义的数据库角色

    更改用户定义的数据库角色注意事项 需具有以下一项或多项权限或成员身份才能运行此命令: 对角色具有 ALTER 权限 对数据库具有 ALTER ANY ROLE 权限 具有 db_securityadm ...

  4. linux下的别名机制

    相当于用户自己创建一个属于自己的命令.在当前用户的家目录下有一个.bashrc文件,编辑该文件: eg:alias cls='clear' 如果命令要生效需要重新登录.用户输入cls就可以达到清屏的目 ...

  5. 【spring源码分析】IOC容器初始化(六)

    前言:经过前几篇文章的讲解,我们已经得到了BeanDefinition,接下来将分析Bean的加载. 获取Bean的入口:AbstractApplicationContext#getBean publ ...

  6. console.table(),在控制台以表格形式输出对象

    今天给大家安利一个属性,console.table(). 它的作用在控制台以表格的形式显示object.这样看起来是不是更方便了呢. var aaa = [ {index:0,name:"1 ...

  7. Linux新手随手笔记1.7

    配置网卡(本地电脑) Vment1   仅主机模式 Vment8   nat模式 物理机 : 192.16810.1  /255.255.255.0 服务器 : 192.168.10.10 /255. ...

  8. 七 Struts2 文件上传和下载

    配置文件 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE struts PUBLIC &qu ...

  9. Data Protection - how to manage expired key?(转载)

    问 According to ASP.NET Key Management: Deleting a key is truly destructive behavior, and consequentl ...

  10. MVC和MVVM

    MVC和MVVM的qu'bie 1. Mvvm定义MVVM是Model-View-ViewModel的简写.即模型-视图-视图模型.[模型]指的是后端传递的数据.[视图]指的是所看到的页面.[视图模型 ...