浏览器兼容性总结

作者: 卧江流 | 来源:发表于2018-06-19 21:59 被阅读0次

对常见的css属性进行浏览器兼容性总结
ESModule 浏览器兼容性
减少浏览器兼容性问题
浏览器兼容性
svg 与canvas的区别
浏览器兼容性
2018-10-16检测浏览器及设备的兼容性
浏览器常见的兼容问题
浏览器兼容性问题-常见问题总结汇总
浏览器兼容性

作为一个前端，工作过程中总免不了会遇到一些浏览器兼容性的问题，编码过程中对于兼容性有一定的预见性会大大提高编码效率，因此对于各大浏览器的兼容性总结还是很有必要的。

内核

平时人们上网用的浏览器五花八门，这些浏览器的内核是不尽相同的，浏览器的内核决定了浏览器对于网页的语法解释，因此不同的内核将导致不同的渲染效果，也就产生了浏览器的兼容性问题。目前的浏览器内核主要有以下几种:

Trident ([‘traɪd(ə)nt])
Trident内核又被称为IE内核,常见的浏览器有IE6-IE10,360浏览器（1.0-5.0是Trident,6.0是Trident+Webkit，7.0是Trident+Blink），猎豹浏览器（1.0-4.2版本是Trident+Webkit，4.3及以后版本为Trident+Blink）；傲游浏览器（傲游1.x、2.x为IE内核，3.x为Webkit双内核）；百度浏览器的早期版本，世界之窗浏览器（最初为IE内核，2013年采用chorme+IE内核）；腾讯TT,搜狗高速浏览器（1.x是Trident，2.0以后是Trident+Webkit），UC浏览器（Blink内核+Trident内核）；
Gecko（[‘gekəʊ])
Gecko又称为Firefox内核，最开始由Netscape6开始采用，后来火狐浏览器采用，其特点是代码公开，因此全世界程序员都可以对其进行代码编写。
Presto([‘prestəʊ])
Presto浏览器是Opera的前内核，现在已经停止使用，Opera现在已经改用Blink内核。
Webkit内核
webkit内核是苹果公司自己开发的，safari浏览器使用。常见浏览器傲游浏览器3，Android默认浏览器
Blink/Chormium
由谷歌发布，Blink是Webkit的分支，在Webkit的基础上研发更加快速和渲染引擎更加简约，并逐步脱离Webkit影响。

浏览器的兼容性通常可以分为css样式渲染的兼容性和api差异:

常见的css兼容性问题（不考虑IE6）

浏览器对于样式的初始化不同
我们可以采用 *{margin:0;padding:0;}这种方式来清除浏览器初始的默认边距，这种方式写起来简单，但是通配符就需要把所有的标签遍历一遍，当网站较大时，样式比较多，这样写会大大加大网站运行的负载，会使网站加载时间过长。
所以我们应该把reset的元素单独列出来，具体初始化某个标签，或者也可以使用Normalize.css和reset.css，这两个浏览器默认样式重置库。
透明度
IE: filter: alpha(opacity=60)
非IE: opacity:0.6
IE7-IE9在设置了margin:0 auto;后不能使div居中显示
Firefox点击链接出现虚线框
。。。未完待续

常见的api兼容

浏览器宽高问题

var winW = document.body.clientWidth || document.documentElement.clientWidth; // 获取网页可见区域的宽度
var winH = document.body.clientHeight || document.documentElement.clientHeight; // 获取网页可见区域高度
// 以上都不包含边框的宽高，滚动条高度，offsetWidth和offsetHeight包含边框和滚动条高度
var winW = document.body.scrollWidth || document.documentElement.scrollWidth;
var winW = document.body.scrollHeight || document.documentElement.scrollHeight;
// 获取整个网页的宽高，包括滚动隐藏掉的距离
var winW = document.body.scrollTop || document.documentElement.crollTop;
var winW = document.body.scrollLeft || document.documentElement.scrollLeft;
// 浏览器被卷去的距离
var  screenH = window.screen.height; //   屏幕分辨率的高
var screenW = window.screen.width; // 屏幕分辨率的宽
var screenX = window.screenLeft; // 浏览器窗口相对于屏幕的x坐标（除FireFox）
var screenXX = window.screenX; // FireFox相对于屏幕的x坐标
var screenY= window.screenTop; // 浏览器窗口相对于屏幕的y坐标（除FireFox）
var screenYY = window.screenY; // FireFox相对于屏幕的y坐标

事件相关

  // 设置监听事件
function addEvent(obj,type,fn) { // 添加事件监听，三个参数分别为对象，事件类型，事件处理函数
  if(obj.addEventListener){
      obj.addEventListener(type,fn,false); // 非IE
  }else{
      obj.attachEvent('on'+type,fn);
  }
  
}

// 取消事件监听
function removeEvent(obj,type,fn){
    if(obj.removeEventListener){
        obj.removeEventListener(type,fn,false);
    }else {
        obj.detachEvent('on'+type,fn);
    }
}

// event
document.onclick = function (ev){
  var e = ev; //  谷歌火狐支持，IE9以上支持，以下不支持
}
document.onclick = function(){
  var e = window.event; // 谷歌和IE支持，火狐不支持 
}
// 兼容写法
document.onclick = function(ev) {
  var e = ev || window.event;
}

// 阻止事件冒泡
document.onclick = function(e) {
  var e = e || window.event;
   if(e.stopPropagation){
      e.stopPropagation();
  }else{
      e.cancelBubble = true;
  }
}

// 阻止默认事件
  document.onclick = function(e){
      var e = e || window.event;
       if(e.preventDefault){
          e.preventDefault();
      }else {
          e.returnValue = 'false';
      }
  }