几个兼容性问题小结

本文探讨了CSS在不同浏览器中的兼容性问题,包括display属性、滤镜效果及Avalon框架的支持情况,并提供了JavaScript检测IE浏览器版本的方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值