目录
1、浏览器内核
① 浏览器内核主要分为两种：渲染引擎 和 JS引擎。
② 目前主流的内核有4个：
2、常见主流浏览器的内核
IE浏览器、Chrome浏览器、Firefox浏览器、Safari浏览器
3、常见的兼容性问题
4、Vue2.x 和 jQuery2.x 适配兼容 IE9+总结
① placeholder不生效
②部分第三方包不兼容 IE 浏览器
③get 请求缓存问题
④解决IE低版本浏览器不支持location对象的origin属性
5、HTML5 和 CSS3 的兼容问题
①对于HTML5的兼容
②对于CSS3的兼容
1、浏览器内核
① 浏览器内核主要分为两种：渲染引擎 和 JS引擎。
渲染引擎负责页面的渲染，JS引擎负责执行解析JavaScript；
由于 JS 引擎越来越独立，现在所说的浏览器内核大都指渲染引擎。
② 目前主流的内核有4个：
Trident：由微软开发，即我们熟知的 IE 内核；
Gecko：使用 C++ 开发的渲染引擎，包括了 SpiderMonkey 即我们熟悉的 FireFox；
Presto：Opera 使用的内核；
Webkit / Blink：前端使用最多的 Chrome 和 Safari 使用的内核；
浏览器历史：
1990年诞生的，由蒂姆 伯纳斯 李发明，一开始的作用是分享资讯，名字叫world wide web，后来libwww-> nexus；
1993年，美国伊利诺大学中的NCSA组织成员之一，叫马克 安德森，开发了MOSIAC浏览器，可以显示图片；
1994年，马克 安德森 和吉姆 克拉克硅图成立了一家公司MOSIAC communication corporation，后来被spy glass公司（有MOSIAC马赛克商标使用权）合并，再后来是Netscapecommunication corporation，再后来出现了风靡一时的浏览器，Netscape navigator导航者，网景公司发明的，直到都很火；
1996年，微软收购了spy glass，立马开发了IE浏览器（Internet explorer）1.0 , 前身和内核就是MOSIAC，同年诞生了IE3和脚本语言Jscript。网景公司中的开发人员Brendan eich，在navigator的基础上开发了livescript；同年，JAVA火起来了（SUN开发的）。网景公司与SUN公司合作推出了JavaScript
2001年，IE6 XP诞生。同年出现了JS引擎
，Mozilla公司带来了Firefox火狐，根据Netscape navigator开发的
，非常重要的一年，Google基于 webkit blink 内核诞生了Chrome浏览器，还开发了progress web app（渐进式app）同时带来了很牛逼的V8引擎（JS引擎），可以直接翻译机器码，速度很快，且独立于浏览器运行。Node.js诞生也是基于V8引擎。
，甲骨文oracle收购了SUN公司，JS的所有权给了甲骨文。
2、常见主流浏览器的内核
IE浏览器、Chrome浏览器、Firefox浏览器、Safari浏览器
IE浏览器：Trident内核，也成为IE内核
Chrome浏览器：现在是Blink内核，以前是Webkit内核
Firefox浏览器：Gecko内核，俗称Firefox内核
Safari浏览器：Webkit内核
Opera浏览器：最初是自己的Presto内核，后来加入谷歌大军，从Webkit又到了Blink内核；
360浏览器：IE+Chrome双内核
猎豹浏览器：IE+Chrome双内核
百度浏览器：IE内核
QQ浏览器：Trident（兼容模式）+Webkit（高速模式）
3、常见的兼容性问题
不同浏览器的标签默认的外补丁( margin )和内补丁(padding)不同
解决方案： css 里增加通配符 * { margin: 0; padding: 0; }
IE6双边距问题；在 IE6中设置了float , 同时又设置margin , 就会出现边距问题
解决方案：设置display:inline;
当标签的高度设置小于10px，在IE6、IE7中会超出自己设置的高度
解决方案：超出高度的标签设置overflow:hidden,或者设置line-height的值小于你的设置高度
图片默认有间距
解决方案：使用 float 为 img 布局
IE9一下浏览器不能使用opacity
解决方案：
opacity: 0.5;filter: alpha(opacity = 50);filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);
边距重叠问题；当相邻两个元素都设置了margin 边距时，margin 将取最大值，舍弃最小值；
解决方案：为了不让边重叠，可以给子元素增加一个父级元素，并设置父级元素为overflow:hidden；
cursor:hand 显示手型在safari 上不支持
解决方案：统一使用 cursor:pointer
两个块级元素，父元素设置了overflow:auto；子元素设置了position:relative ;且高度大于父元素，在IE6、IE7会被隐藏而不是溢出；
解决方案：父级元素设置position:relative
IE不支持渐变色写法
解决方案：使用切图代替
使用rem布局时，设置border-radius设置为圆形可能会无效，显示为方块状
（场景：在使用css3实现类似于雷达信号的效果时，span{display: block;width: .5rem;height: .5rem;border: .01rem solid #fff;border-radius: 50%;}，结果有部分span展示位方块状）
解决方案：要求精度不高时，使用px即可；如果严格要求自适应，做一个图片代替
子元素设置margin-top时，值会被添加到其父元素上
解决方案：给父元素添加overflow: hidden或者父元素使用padding-top代替;
4、Vue2.x 和 jQuery2.x 适配兼容 IE9+总结
① placeholder不生效
②部分第三方包不兼容 IE 浏览器
③get 请求缓存问题
④解决IE低版本浏览器不支持location对象的origin属性
具体：
Vue2.x 和 jQuery2.x 适配兼容 IE9+总结_vue2 兼容ie9_小草莓蹦蹦跳的博客-CSDN博客
5、HTML5 和 CSS3 的兼容问题
①对于HTML5的兼容
Coding JavaScript 和使用Google的html5shiv包（推荐）
②对于CSS3的兼容
如何在IE6~8浏览器中兼容响应式布局呢？和respond.js使用步骤
具体：
HTML5 和 CSS3 的兼容问题_小草莓蹦蹦跳的博客-CSDN博客
