浅谈前端兼容问题

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/mapbar_front/article/details/79936394

1、为什么会出现兼容问题

在各大浏览器厂商的发展过程中,他们其实对web的标准都有不同的实现,因为实现的标准的不同,所以会有兼容性的产生。通俗的说,就是对于web标准,有些浏览器支持,有些浏览器不支持。

2、从历史角度看兼容

早期IE是在浏览器的世界中,占据主导地位。所以它自身实现了很多不同于标准浏览器的东西,有css的,也有js的:

Js方面:
1、滚动事件的兼容:

scrollTop = document.documentElement.scrollTop||document.body.scrollTop;

这个是针对早期的IE和谷歌

2、事件对象的兼容:

e = evt||window.event

3、阻止冒泡的兼容:

if(e.stopPropagation){
    e.stopPropagation();
}else{
    e.cancelBubble=true;
}

4、阻止默认行为的兼容:

if(e.preventDefault){
    e.preventDefault();
}else{
   e. returnValue = false;
}

5、关于鼠标按键编码的兼容

function but(evt){
    var e = evt || window.event; 
    if(evt){
        return e.button;
    } else if (window.event){
        switch(e.button){
            case 1: return 0;
            case 4: return 1;
            case 2: return 2;
        }
    }  
}

6、添加事件监听器的兼容

if(target.addEventListener){
    target.addEventListener("click",fun,false);
}else{
    target.attachEvent("onclick",fun);
}

7、解除事件监听器的兼容

if(target.removeEventLisener){
    target . removeEventListener(“click” , fun , false); 
}else{
    target . detachEvent(“onclick”, fun);
}

8、ajax创建对象的兼容

var xhr = nullif(window.XMLHttpRequest){
    xhr = new XMLHttpRequest();
}else{
    xhr = new ActiveXObject("Microsoft XMLHTTP");
}

9、关于选取样式的属性的兼容

function getStyle(obj,attr){
    if(obj.currentStyle){
       return obj.currentStyle[attr];
    }else{
        return getComputedStyle(obj,false)[attr];
    }
}

10、关于日期里的getYear()方法,在ie里是2016,而在火狐中是116;
解决方法:统一使用getFullYear()方法;

11、关于获取自定义属性:
在ie8及以下可以通过常规方式获取自定义属性,但是标准浏览器是不支持的;
解决方法:统一使用getAttribute()来获取

12、关于获取className的问题:
getAttribute(“class”); //IE7及以下版本不支持该方法,并且在浏览器中的返回值为null,其他浏览器支持该方法;
getAttribute(“className”); // IE7及以下版本支持该方法,其他浏览器不支持
obj.getAttribute(“clase”)==null?obj.getAttribute(“className”):obj.getAttribute(“class”);

css方面:
1、低版本IE浏览器肯定不支持flex布局。

2、低版本的IE不支持CSS3特性。

3、在css方面,低版本的IE也有很多的css hark技术。

比如:图片的3像素bug、行高不一致、border、默认高度等等。

从不同的平台看兼容问题

一直以来、浏览器慢慢分化为pc端和移动端,pc端浏览器的发展慢,移动端的浏览器发展快。

所以会有这样的一条结论:移动端对基本的东西,支持的够完善,所以我们肯定不需要考虑移动端能不能用flex布局的问题。移动端需不需要支持数组的filter方法的问题。

CSS3本身有兼容

css3在低版本浏览器肯定做不到兼容的,可能有时候我们需要使用它的时候,会有一个策略——优雅降级。

优雅降级的意思,就是我们可能无法用比较标准的方式实现某种特效,但是我们可以使用一种稍差的方式,实现更好的兼容性。

CSS3本身针对火狐、谷歌等不同浏览器有自身的前缀,提高兼容性。

ES6、ES7本身具有兼容问题

现在的浏览器,对ES6有很大程度上的支持,但是支持的程度还不完全,所以会有babel这样的解析器,把ES6语法转化为标准的ES7语法。

展开阅读全文

没有更多推荐了,返回首页