浏览器兼容性问题简单整理

最近做了一个pc端网页，整理一下笔记：

6.ie上的下拉框下拉按钮问题：

参考：https://www.cnblogs.com/liuyanxia/p/8675703.html

（1）、可以去掉下拉按钮（依然解决不了下拉框太丑的问题）

select::-ms-expand { display: none; }
select {
            padding-right:20px;
            color:#a7bce3;
            appearance:none;
            -moz-appearance:none;
            -webkit-appearance:none;
            background: rgba(21, 81, 176, 0.89) url("../../../app/img/select-icon.png") no-repeat scroll right center;
}

（2）、模拟下拉框

　代码参考上面链接，其实可以更简洁一些。

select {
            padding-right:20px;
            color:#a7bce3;
            appearance:none;
            -moz-appearance:none;
            -webkit-appearance:none;
            background: rgba(21, 81, 176, 0.89) url("../../../app/img/select-icon.png") no-repeat scroll right center;
        }

5.ie9 不支持 const

4.ie和火狐 a标签去除虚线框

参考：https://blog.csdn.net/zsy_snake/article/details/80065913

（1）、设置  :focus{ outline: none; } 属性，但IE6、 7并没有用，似乎在一些Firefox浏览器上也没用

（2）、设置 ::-moz-focus-inner{ border: 0; }属性，Firefox有效,此处设置的不是outline，是border

（3）、最简单粗暴的方法 jq 基础下 $(this).blur(); 使其主动失去焦点，不用考虑浏览器问题，麻烦的是需要每个作用对象下执行

3.ie8 不支持 forEach

参考：https://blog.csdn.net/pand0118/article/details/53521434/

if ( !Array.prototype.forEach ) {
  Array.prototype.forEach = function forEach( callback, thisArg ) {
    var T, k;
    if ( this == null ) {
      throw new TypeError( "this is null or not defined" );
    }
    var O = Object(this);
    var len = O.length >>> 0; 
    if ( typeof callback !== "function" ) {
      throw new TypeError( callback + " is not a function" );
    }
    if ( arguments.length > 1 ) {
      T = thisArg;
    }
    k = 0;
    while( k < len ) {
      var kValue;
      if ( k in O ) {
        kValue = O[ k ];
        callback.call( T, kValue, k, O );
      }
      k++;
    }
  };
}

　

2.ie8 不支持indexOf

参考：https://blog.csdn.net/marcelwu/article/details/53307106

// Production steps of ECMA-262, Edition 5, 15.4.4.14
// Reference: http://es5.github.io/#x15.4.4.14
if (!Array.prototype.indexOf) {
  Array.prototype.indexOf = function(searchElement, fromIndex) {

    var k;

    // 1. Let o be the result of calling ToObject passing
    //    the this value as the argument.
    if (this == null) {
      throw new TypeError('"this" is null or not defined');
    }

    var o = Object(this);

    // 2. Let lenValue be the result of calling the Get
    //    internal method of o with the argument "length".
    // 3. Let len be ToUint32(lenValue).
    var len = o.length >>> 0;

    // 4. If len is 0, return -1.
    if (len === 0) {
      return -1;
    }

    // 5. If argument fromIndex was passed let n be
    //    ToInteger(fromIndex); else let n be 0.
    var n = fromIndex | 0;

    // 6. If n >= len, return -1.
    if (n >= len) {
      return -1;
    }

    // 7. If n >= 0, then Let k be n.
    // 8. Else, n<0, Let k be len - abs(n).
    //    If k is less than 0, then let k be 0.
    k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);

    // 9. Repeat, while k < len
    while (k < len) {
      // a. Let Pk be ToString(k).
      //   This is implicit for LHS operands of the in operator
      // b. Let kPresent be the result of calling the
      //    HasProperty internal method of o with argument Pk.
      //   This step can be combined with c
      // c. If kPresent is true, then
      //    i.  Let elementK be the result of calling the Get
      //        internal method of o with the argument ToString(k).
      //   ii.  Let same be the result of applying the
      //        Strict Equality Comparison Algorithm to
      //        searchElement and elementK.
      //  iii.  If same is true, return k.
      if (k in o && o[k] === searchElement) {
        return k;
      }
      k++;
    }
    return -1;
  };
}

　　

1.js获取浏览器版本号

参考：https://www.cnblogs.com/XCWebLTE/archive/2017/06/15/7017338.html

　　　　　function IEVersion() {
            var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串  
            var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器  
            var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判断是否IE的Edge浏览器  
            var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;
            if(isIE) {
                var reIE = new RegExp("MSIE (\d+\.\d+);");
                reIE.test(userAgent);
                var fIEVersion = parseFloat(RegExp["$1"]);
                if(fIEVersion == 7) {
                    return 7;
                } else if(fIEVersion == 8) {
                    return 8;
                } else if(fIEVersion == 9) {
                    return 9;
                } else if(fIEVersion == 10) {
                    return 10;
                } else {
                    return 6;//IE版本<=7
                }   
            } else if(isEdge) {
                return 'edge';//edge
            } else if(isIE11) {
                return 11; //IE11  
            }else{
                return -1;//不是ie浏览器
            }
        }

　　返回值说明：

值	值类型	值说明
-1	Number	不是ie浏览器
6	Number	ie版本<=6
7	Number	ie7
8	Number	ie8
9	Number	ie9
10	Number	ie10
11	Number	ie11
'edge'	String	ie的edge浏览器