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

您所在的位置：网站首页 › vue前端样式框架 › 前端主流浏览器兼容写法（css、js）以及主流框架vue,react的兼容性

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

2024-07-14 08:21| 来源: 网络整理| 查看: 265

前言：

前端样式很重要，但是因为浏览器种类繁多，内核不同，会导致各种兼容问题。尤其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抛弃IEIE是一个过去式，微软自己都开发了一个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

【本文地址】

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

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

今日新闻

推荐新闻