前言：
前端样式很重要，但是因为浏览器种类繁多，内核不同，会导致各种兼容问题。尤其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 <11）或具有不兼容实现（例如IE 11）的较旧的浏览器和设备，请考虑在捆绑的应用程序中包括全局polyfill，例如core-js（具体请看react官网javascript环境要求）。
react官网
总结：
总的来说都是ie这个浏览器惹的祸，都是对它的兼容。当然其他也会出现兼容问题但是都是很小的兼容性问题，只需要稍微修改即可。还好明年微软则会停止对ie的维护和更新。