作为一名前端攻城狮，浏览器兼容是一个必须面对的问题，浏览器兼容归根结底还是浏览器的内核不一致导致的，那什么是内核呢？
开发者按照规范编写代码，浏览器开发商也会开发一套按规范把代码渲染成页面的东西，这个东西就是引擎或内核。
重点
浏览器内核
Webkit(v8引擎)：chrome，opera，safari，国产浏览器和手机端
Gecko:firefox(火狐浏览器)
Trident:IE浏览器，（IE的最新版本是edge）
下面来一段干货，如何区分当前浏览器内核代码如下：
H5判断
<!--[if IE 6]>仅IE6可识别<![endif]-->
<!--[if lte IE 6]> IE6及其以下版本可识别<![endif]-->
<!--[if lt IE 6]> IE6以下版本可识别<![endif]-->
<!--[if gte IE 6]> IE6及其以上版本可识别<![endif]-->
<!--[if gt IE 6]> IE6以上版本可识别<![endif]-->
<!--[if IE]> 所有的IE可识别<![endif]-->
<!--[if !IE]><!--> 除IE外都可识别<!--<![endif]-->
js判断
// 用的es6语法，不支持es6的编辑器记得babel转一下哦！
const IEVersion = () => {
const userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
const isIE =
userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器
const isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判断是否IE的Edge浏览器
const isIE11 =
userAgent.indexOf("Trident") > -1 && userAgent.indexOf("rv:11.0") > -1;
if (isIE) {
const reIE = new RegExp("MSIE (\\d+\\.\\d+);");
reIE.test(userAgent);
const fIEVersion = parseFloat(RegExp["$1"]);
if (fIEVersion === 7) {
return 7;
} else if (fIEVersion === 8) {
return 8;
} else if (fIEVersion === 9) {
return 9;
} else if (fIEVersion === 10) {
return 10;
} else {
return 6; //IE版本<=7
}
} else if (isEdge) {
return "edge"; //edge
} else if (isIE11) {
return 11; //IE11
} else {
return -1; //不是ie浏览器
}
};
细节
谈到这里，小伙伴们应该大致对浏览器兼容问题有些了解了吧！下面列举了各个内核所涉及的浏览器：
Trident(IE内核)：
IE6、IE7、IE8（Trident 4.0）、IE9（Trident 5.0）、IE10（Trident 6.0）、360安全浏览器（1.0-5.0为Trident，6.0为Trident+Webkit，7.0为Trident+Blink）猎豹极轻浏览器，360极速浏览器（7.5之前为Trident+Webkit，7.5为Trident+Blink）猎豹安全浏览器（1.0-4.2版本为Trident+Webkit，4.3及以后版本为Trident+Blink）猎豹极轻浏览器，傲游浏览器（傲游1.x、2.x为IE内核，3.x为IE与Webkit双核）、百度浏览器（早期版本）、世界之窗浏览器[2] （最初为IE内核，2013年采用Chrome+IE内核）、2345浏览器、腾讯TT、淘宝浏览器、采编读浏览器、搜狗高速浏览器（1.x为Trident，2.0及以后版本为Trident+Webkit）、阿云浏览器（早期版本）、瑞星安全浏览器、Slim Browser、 GreenBrowser、爱帆浏览器（12 之前版本）、115浏览器、155浏览器、闪游浏览器、N氧化碳浏览器、糖果浏览器、彩虹浏览器、瑞影浏览器、勇者无疆浏览器、114浏览器、蚂蚁浏览器、飞腾浏览器、速达浏览器、佐罗浏览器、海豚浏览器（iPhone/iPad/Android）、UC浏览器（Blink内核+Trident内核）等。
Gecko(Firefox内核)：
Mozilla Firefox、Mozilla SeaMonkey、waterfox（Firefox的64位开源版）、Iceweasel、Epiphany（早期版本）、Flock（早期版本）、K-Meleon。 Presto(Opera前内核) (已废弃)：
Opera12.17及更早版本曾经采用的内核，现已停止开发并废弃。
Webkit(Safari内核,Chrome内核原型,开源)：
傲游浏览器3、[1] Apple Safari (Win/Mac/iPhone/iPad)、Symbian手机浏览器、Android 默认浏览器。
Blink：
这一渲染引擎是开源引擎WebKit中WebCore组件的一个分支，并且在Chrome（28及往后版本）、Opera（15及往后版本）和Yandex浏览器中使用。
以上这些浏览器内核的区别只作了解，有什么错误之处欢迎各位指正！觉得还不错的话，欢迎留下大大的赞👍！谢谢！
