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坑太多，还是建议放弃支持为好。

转载于:https://www.cnblogs.com/zhaogaojian/p/10453204.html