前端主流浏览器兼容写法（css、js）以及主流框架vue,react的兼容性

前言：

前端样式很重要，但是因为浏览器种类繁多，内核不同，会导致各种兼容问题。尤其ie，但好在微软对ie不在更新了。

常见浏览器：

常见的浏览器有：IE、Edge（替代了ie）、Firefox、QQ浏览器、Safari、Opera、Google Chrome、百度浏览器、搜狗浏览器、猎豹浏览器、360浏览器、UC浏览器、遨游浏览器、世界之窗浏览器等。

但目前最为主流浏览器有五大款，分别是IE、Firefox、Google Chrome（谷歌）、Safari、Opera。

主流浏览器内核：

Trident
Gecko
webkit
presto

Blink

Chromium （在架构上使用了Apple发展出来的WebKit排版引擎、Safari的部份源代码与Firefox的成果，并采用Google独家开发出的V8引擎，以提升解译JavaScript的效率，而且设计了“沙盒”、“黑名单”、“无痕浏览”等功能，来实现稳定与安全的网页浏览环境。具体请看百度百科Chroium）

1、IE浏览器内核：Trident内核，也是俗称的IE内核；
2、Chrome浏览器内核：统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核；
3、Firefox浏览器内核：Gecko内核，俗称Firefox内核；
4、Safari浏览器内核：Webkit内核；
5、Opera浏览器内核：最初是自己的Presto内核，后来是Webkit，现在是Blink内核；
6、360浏览器、猎豹浏览器内核：IE+Chrome双内核；
7、搜狗、遨游、QQ浏览器内核：Trident（兼容模式）+Webkit（高速模式）；
8、百度浏览器、世界之窗内核：IE内核；
9、2345浏览器内核：以前是IE内核，现在也是IE+Chrome双内核；

10、Edge：Chromium(百度百科Edge)

其中Google Chrome（谷歌浏览器）是兼容性最好的，而ie则是兼容最不好的，尤其以低版本浏览器。

Chromium和Chrome所使用的webkit内核，是目前公认的最快的网页浏览方式。

五大主流浏览器及四大内核详细介绍

css浏览器兼容写法：

 就是浏览器内核前缀加属性

-webkit- : safari,chrome浏览器；
-moz-: firefox浏览器；
-ms-: ie浏览器；
-o-: opera浏览器

例如：

-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-ms-overflow-style: scrollbar;

js属性方法兼容：

不仅css有兼容性，js有也兼容性

例如：

1: 文档实体依附的主体

   var body = document.body || document.documentElement;

 

2:   滚动条距离

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

 

3:  事件绑定

if(ele.addEventListener){
     ele.addEventListener("click",callback,false);
 }else{
    ele.attachEvent("onclick",callback);
 }

 

4:可视高度

window.innerHeight || document.documentElement.clientHeight

window.innerWidth || document.documentElement.clientWidth

 

5:事件对象

var e = event || windo w.event

 

6:事件委托

e.target || e.srcElement;

 

7：健盘信息

document.onkeyup = function(e) {
        var e = e || window.event;
        var key = e.keyCode || e.which || e.charCode;
        var currentKey = String.fromCharCode(key);
        alert("按键码: " + key + " 字符: " + currentKey);     
    };
 

 

var text = innerText || textContent;

 

function prevent(e){
 

   if(e.preventDefault){
        e.preventDefault();

}else{
        e.returnValue=false;(ie)

    }

}

 

e.stopPropagation() ? e.stopPropagation() : e.cancelBubble=true;

另一种阻止冒泡的方式： event.target == event.currentTarget;自己被点击自己被处理
 

取消冒泡 event.cancelBubble = true;

 

var xhr = new XMLHttpRequest()     ||    new ActiveXObject("Microsoft,XMLHTTP");
 

滚轮事件:

- 滚轮（chrome、IE）
        - 事件名：onmousewheel
        - 绑定： div.onmousewheel = function(){}
        - 取值：    event.wheelDelta
            - 方向
                - 正值：滚轮是**向上**滚动
                - 负值：滚轮是**向下**滚动
            - 大小
                - 均为 150 的倍数，即：幅度大小 = 返回的值 / 150
    - 滚轮（FireFox）
        - 事件名：DOMMouseScroll
        - 绑定： div.addEventListener('DOMMouseScroll', function(){}, false);
        - 取值：    event.detail
            - 方向
                - 负值：滚轮是**向上**滚动
                - 正值：滚轮是**向下**滚动
            - 大小
                - 均为 3 的倍数，即：幅度大小 = 返回的值 / 3
- 当滚轮事件冲突的时候，需要禁止默认行为
    - （chrome、IE）
        - return false 即可
    - （FireFox） 
        - 需要对事件使用 preventDefault()
        - 通知浏览器不要执行与事件关联的默认动作
        - 示例
            - event.preventDefault(); 
- 注意：
    - 程序员一般只关注滚动的方向，不关注滚动的幅度
    - preventDefault() 是标准方法。但是，老旧 IE 不支持这个方法，调用时会报错
    
    -禁止默认行为
        - event.preventDefault;
        - return false;

8. let text=element.textContent=text||element.innerText=text;
9.https://blog.csdn.net/qq_24521431/article/details/82705947  innerHtml

其中也是ie（低版本）很麻烦，比如js的es6语法，promise,箭头函数等都不支持。现在主流框架都放弃了对低版本ie浏览器的兼容，而且微软也即将放弃对ie的维护和更新。

主流框架中对ie的兼容都是用polyfills、es6-promise转换成es5语法。

主流框架中的兼容性（vue、react）

vue:

Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。

vue2.x的兼容性

vue3.x则停止了兼容ie 准确的来说 Vue 3 将不会支持 IE11，对于确切需要 IE11 支持的用户，官方建议使用 Vue 2。

Vue3停止支持IE的几点原因

• IE对Proxy不支持，Vue要使用Proxy => Evan You 带着 Vue3抛弃IE
• IE是一个过去式，微软自己都开发了一个Edge => 自己公司抛弃 IE
• 一些政府机关网站（遗留系统）以前很喜欢IE,现在会提示使用Chrome => 抛弃IE

vue3.x中文文档 

我自己总结的vue3的新特性及api

react:

react：17尽管老版本的浏览器（例如IE 9和IE 10）需要某些填充，但React支持所有流行的浏览器，包括Internet Explorer 9和更高版本。

React 16取决于集合类型Map和Set。如果您支持可能还没有本地提供（例如IE <11）或具有不兼容实现（例如IE 11）的较旧的浏览器和设备，请考虑在捆绑的应用程序中包括全局polyfill，例如core-js（具体请看react官网javascript环境要求）。

react官网

总结：

总的来说都是ie这个浏览器惹的祸，都是对它的兼容。当然其他也会出现兼容问题但是都是很小的兼容性问题，只需要稍微修改即可。还好明年微软则会停止对ie的维护和更新。