几个兼容性问题小结

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 version="1.1" xmlns="http://www.w3.org/2000/svg" style="width:218px;height:40px;">
    <filter id="grayscale">
        <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
    </filter>
</svg>

 

在需要的地方加入svg

<img src="avatarImgSrc" style="display:none;width:218px;height:40px" alt="" class="svgSiblings">
<svg style="width:218px;height:40px" class="svgImg">
    <image  xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://test.jklife.com:8888/jkgwimage/upload/content/file/2018/12/10/93a7646a04934a838430c44809675f68.png" x="0" y="0" width="218" height="40" filter="url('#grayscale')"></image>
</svg>

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

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

<div ms-if=“linkState">
    <img ms-attr-src='el.avatarImgSrc' class="gray companyImg" />
</div>
<div ms-if=“!linkState">
    <img ms-attr-src="el.avatarImgSrc" style="display:none;width:218px;height:40px" alt="" class="svgSiblings">
    <svg style="width:218px;height:40px" class="svgImg">
        <image  xmlns:xlink="http://www.w3.org/1999/xlink" xlink:ms-attr-href="el.avatarImgSrc" x="0" y="0" width="218" height="40" ms-attr-filter="url('#grayscale{{el.id}}')"></image>
    </svg>
</div>

5、浏览器对avalon支持

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

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

//不支持的浏览器
<div class='bj full' ms-if="!ieState" ms-attr-style="background-image:url('{{el.avatarImgSrc}}');-webkit-background-image:url('{{el.avatarImgSrc}}');-moz-background-image:url('{{el.avatarImgSrc}}')">
</div>
//支持的浏览器
<div class="bj full" ms-if="ieState" style="overflow: hidden;">
    <img ms-attr-src="{{el.avatarImgSrc}}" width="100%"/>
</div>

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

//执行的浏览器
<a ms-if="!ieState" data-wow-delay="0.2s" class="marginRight50 text-center wow fadeInUp" href="#!/serviceGuide">
    <img src="./images/icon_service.png" class="img50"/>
</a>
//不执行的浏览器
<a ms-if="ieState" class="marginRight50 text-center wow fadeInUp" href="#!/serviceGuide">
    <img src="./images/icon_service.png" class="img50"/>
</a>