IE7下使用兼容Icon-Font CSS类
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类的更多相关文章
- 0c-42-ARC模式下如何兼容非ARC的类
1.ARC模式下如何兼容非ARC的类 让程序兼容ARC和非ARC部分.转变为非ARC -fno-objc-arc 2.将MRC转换为ARC ARC也需要考虑循环引用问题:一端用strong,一端用we ...
- 1.ARC模式下如何兼容非ARC的类
ARC模式下如何兼容非ARC的类 :转变为ARC的, -f-objc-arc 非ARC模式下如何兼容ARC的类 :转变为非ARC -fno-objc-arc
- Angular 1.2.27在IE7下的兼容问题
最近负责公司的一个国外项目,老外指定要用angular,并且要兼容到IE7. 项目使用的是Angular版本是1.2.27,为了能在IE7下跑,需要做如下配置 1. 加载json2.js 2. 加载h ...
- jquery解析XML在IE7下不兼容的问题
jquery在解析XML内容的时候在IE7下无法显示,是因为数据格式的问题,解决办法如下: $.ajax({ type:"POST", url:&quo ...
- CSS Sprites+CSS3 Icon Font
CSS Sprites+CSS3 Icon Font CSS Sprites在国内很多人叫CSS精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来, ...
- DIV+CSS IE6/IE7/IE8/FF兼容问题汇总
1.IE8下兼容问题,这个最好处理,转化成ie7兼容就可以.在头部加如下一段代码,然后只要在IE7下兼容了,IE8下面也就兼容了 <meta http-equiv="x-ua-comp ...
- DIV+CSS IE6/IE7/IE8/FF兼容问题大全
1. [代码][CSS]代码 1, FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会.(可用!important解决) 2, 居中问题. 1).垂直居 ...
- IE6/IE7下margin-bottom失效兼容解决办法及双倍边距问题
(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-04-08) 一.IE6/IE7下margin-bottom失效兼容解决办法 1.用padding-bottom代替:2.在 ...
- 兼容IE6,IE7和firefox可以使用的一些css hack:
.一些问题是浏览器自身的问题,遇到问题发生无法避免的情况下,那就要考虑使用一些css hack了,以下是针对IE6,IE7和firefox可以使用的一些css hack:(1) a: 针对区别IE6 ...
随机推荐
- python使用rabbitMQ介绍四(路由模式)
一.模式介绍 路由模式,与发布-订阅模式一样,消息发送到exchange中,消费者把队列绑定到exchange上. 这种模式在exchange上添加添加了一个路由键(routing-key),生产者发 ...
- SQL 知道字段名 全表搜索此字段属于哪个表
SELECT name FROM sysobjects WHERE id IN (SELECT ID FROM syscolumns WHERE name='字段名')
- Go语言打造以太坊智能合约测试框架(level2)
传送门: 柏链项目学院 第二课 智能合约自动化编译 前期内容回顾 之前我们的介绍的是如何通过solc编译智能合约,并且调用智能合约,本节我们继续实践,将智能合约的代码自动化编译以及abi文件生成搞定. ...
- Linq语法常见普通语法
闲言碎语 近期比较忙,但还是想写点什么,就分享一些基础的知识给大家看吧,希望能帮助一些linq新手,如果有其它疑问,可以进右上角群,进行交流探讨,谢谢. 开门见山 读这篇文章之前,我先说下,每一种搜索 ...
- Linux学习历程——Centos 7 账户管理命令(用户组篇)groupadd groupmod groupdel
一.命令介绍 groupadd:创建用户组 groupmod:修改用户组属性 groupdel:删除用户组 ---------------------------------------------- ...
- 数据结构学习之栈求解n皇后问题
数据结构学习之栈求解n皇后问题 0x1 目的 深入掌握栈应用的算法和设计 0x2 内容 编写一个程序exp3-8.cpp求解n皇后问题. 0x3 问题描述 即在n×n的方格棋盘上,放置n个皇后 ...
- 在混合开发框架模式中,简化客户端对Web API的频繁调用
在混合开发框架模式中,有时候我们在处理树形节点的时候,需要很多关联的处理,可能需要结合用户配置信息,属性字典,以及表的字段分类等信息来展示一个结构树,那么在处理的时候就可能会频繁的对这些接口API进行 ...
- springMVC 实现redis分布式锁
1.先配置spring-data-redis 首先是依赖 <dependency> <groupId>org.springframework.data</groupId& ...
- ABP之什么是ABP(ASP.NET Boilerplate)
1.介绍 ABP是开源的且文档比较齐全的应用程序框架.其实它不仅仅是个框架,考虑其最佳实践,ABP更提供了基于领域驱动设计(DDD)的强大价格模型. ABP支持最新的ASP.NET Core和EF C ...
- java 图片处理 base64编码和图片二进制编码相互转换
今天在弄小程序项目时,涉及上传图片的更改. 以下是代码: /** * -> base64 * @param imgFile * @return * @throws IOException */ ...