前言:

前端样式很重要,但是因为浏览器种类繁多,内核不同,会导致各种兼容问题。尤其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取决于集合类型MapSet。如果您支持可能还没有本地提供(例如IE <11)或具有不兼容实现(例如IE 11)的较旧的浏览器和设备,请考虑在捆绑的应用程序中包括全局polyfill,例如core-js具体请看react官网javascript环境要求)。

react官网

总结:

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

 

Logo

前往低代码交流专区

更多推荐