几个兼容性问题小结

1、css样式

问题描述：如果元素本身是内联元素，把它的display属性设置为inline-block时，所有浏览器都是支持的。 如果元素本身是块级元素的，把它设为display：inline-block;  ie6/ie7/ie8/ie9都是不支持的。

解决方案：在css中改变元素的行块级时，如下示例

display:inline-block;
*display: inline;/*兼容IE*/
zoom:1;/*兼容IE*/

2、判断是否是ie浏览器，针对ie浏览器不同版本，展示不同的代码

var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否是IE浏览器
var isEdge = userAgent.indexOf("Edge") > -1 && !isIE;    //判断是否IE的Edge浏览器
var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;//判断是否是IE11

if(isIE) {
   var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
   reIE.test(userAgent);
   var fIEVersion = parseFloat(RegExp["$1"]);
   if(fIEVersion == 7) {
        return 7;    //ie7浏览器
    } else if(fIEVersion == 8) {       
        return 8;    //ie8浏览器
    } else if(fIEVersion == 9) {
        return 9;    //ie9浏览器
    }else if(fIEVersion == 10) {
        return 10;   //ie10浏览器
    } else {            
        return 6;    //IE7版本以下版本
    }
} else if(isEdge) {
       return 'edge';      //edge浏览器
} else if(isIE11) {
       return 11;      //IE11浏览器
}else{
       return -1;      //不是ie浏览器
}

3、判断是否是360浏览器

var is360 = _mime("type", "application/vnd.chromium.remoting-viewer");
if (isChrome() && is360) {
    //要执行的代码
    header.ieState = true;
    header.linkState = false;
    ieHomeResize()
}

//检测是否是谷歌内核(可排除360及谷歌以外的浏览器)
function isChrome(){
    var ua = navigator.userAgent.toLowerCase();
    return ua.indexOf("chrome") > 1;
}

//获取mime
function _mime(option, value) {
    var mimeTypes = navigator.mimeTypes;
    for (var mt in mimeTypes) {
        if (mimeTypes[mt][option] == value) {
            return true;
        }
    }
    return false;
}

4、filter滤镜

问题描述：谷歌，火狐，safri，360极速模式，ie9以下都可以正常使用。ie10+以上不支持filter滤镜。

解决方案：可以采用svg解决，如下案例，首先引入svg文件，可以直接写在html里，也可以单独写一个svg文件，这里是直接写在html中。id是唯一的，需要和引用处的id一致。

 

在需要的地方加入svg

如果需要引入多个svg，可以在id后添加数字进行区分。 通过判断浏览器，在ie10+浏览器，360浏览器等不支持filter滤镜的浏览器中，将linkState设置为false。

在html中根据linkState区分展示，如下

5、浏览器对avalon支持

问题描述：部分浏览器不支持avalon的ms-attr-style属性，例如ie。

解决方案：设置一个状态，通过判断浏览器的方式给ieState不同的值。ieState=true时是ie浏览器，ieState=false时是其他浏览器

//不支持的浏览器


//支持的浏览器

    

6、WOW.js不支持ie10以下的浏览器，无法展示data-wow-delay="0.2s"的效果

//执行的浏览器

    

//不执行的浏览器