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 = null;
if(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语法。