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 ...
随机推荐
- Video clip 视频剪辑:入门级
作为一个对小说漫画电视剧电影的设计有着自己独特需求的人,一直对视频剪辑有着浓厚的兴趣,之前用爱剪辑这种通俗易上手的软件做过简单的小视频.但是这个毕竟满足不了我自己的需求而且属于完全门外汉级别.这次终于 ...
- dom4j创建和解析xml文档
DOM4J解析 特征: 1.JDOM的一种智能分支,它合并了许多超出基本XML文档表示的功能. 2.它使用接口和抽象基本类方法. 3.具有性能优异.灵活性好.功能强大和极端易用的特点. 4.是一个开 ...
- 既然CPU一次只能执行一个线程,那多线程存在的意义是什么?
今天看到了一篇文章,终于解除了一直的疑惑. 原文链接:https://www.cnblogs.com/qingbafengliuxia/p/10171638.html CPU的时间是按 ...
- 把流的形式转化为Base64
public class Test2 { public static String get() throws IOException { InputStream resourceAsStream = ...
- springmvc源码分析——入门看springmvc的加载过程
本文将分析springmvc是如何在容器启动的时候将各个模块加载完成容器的创建的. 我知道在web.xml文件中我们是这样配置springmvc的: 可以看到,springmvc的核心控制器就是Dis ...
- EntityFramework Core进行读写分离最佳实践方式,了解一下(二)?
前言 写过上一篇关于EF Core中读写分离最佳实践方式后,虽然在一定程度上改善了问题,但是在评论中有的指出更换到从数据库,那么接下来要进行插入此时又要切换到主数据库,同时有的指出是否可以进行底层无感 ...
- Neutron vxlan network
OpenStack 还支持 vxlan 和 gre 这两种 overlay network. overlay network 是指建立在其他网络上的网络. 该网络中的节点可以看作通过虚拟(或逻辑) ...
- scala的多种集合的使用(4)之列表List(ListBuffer)的操作
1.List列表的创建和添加元素 1)最常见的创建list的方式之一. scala> val list = 1 :: 2 :: 3 :: Nil list: List[Int] = List(1 ...
- SQL 之 字符区别(转)
1.CHAR.CHAR存储定长数据很方便,CHAR字段上的索引效率级高,比如定义char(10),那么不论你存储的数据是否达到了10个字节,都要占去10个字节的空间,不足的自动用空格填充,所以在读取的 ...
- php框架之phalcon
1.开发助手 1) 下载 git clone https://github.com/phalcon/cphalcon.git git clone https://github.com/phalcon/ ...