zoukankan      html  css  js  c++  java
  • 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坑太多,还是建议放弃支持为好。

  • 相关阅读:
    初识JSP知识
    Session每次访问都回新建对象问题的处理
    C++ 重载中括号
    C++ 重载输出符号
    C++ 单目运算 and 双目运算符重载complex
    C++运算符重载范例
    c++ 运算符重载之成员函数重载
    c++ 友元函数
    c++ static 类
    c++ const 类
  • 原文地址:https://www.cnblogs.com/zhaogaojian/p/10453204.html
Copyright © 2011-2022 走看看