知识总结：常见主流浏览器的内核及部分兼容性问题

小草莓蹦蹦跳

已于 2023-07-18 17:43:37 修改

阅读量2.5k

点赞数 3

分类专栏：每日专栏 JavaScript 文章标签：前端 javascript

于 2020-06-16 17:08:21 首次发布

原文链接：https://blog.csdn.net/wanmeiyinyue315/article/details/79654984

版权

每日专栏同时被 2 个专栏收录

226 篇文章 7 订阅

订阅专栏

JavaScript

150 篇文章 3 订阅

订阅专栏

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马赛克商标使用权）合并，再后来是Netscape communication corporation，再后来出现了风靡一时的浏览器，Netscape navigator导航者 ，网景公司发明的，直到2003年都很火；

1996年，微软收购了spy glass，立马开发了IE浏览器（Internet explorer）1.0 , 前身和内核就是MOSIAC，同年诞生了IE3和脚本语言Jscript。网景公司中的开发人员Brendan eich，在navigator的基础上开发了livescript；同年，JAVA火起来了（SUN开发的）。网景公司与SUN公司合作推出了JavaScript

2001年，IE6 XP诞生。同年出现了JS引擎

2003年，Mozilla公司带来了Firefox火狐，根据Netscape navigator开发的

2008年，非常重要的一年，Google基于 webkit blink 内核诞生了Chrome浏览器，还开发了progress web app（渐进式app）同时带来了很牛逼的V8引擎（JS引擎），可以直接翻译机器码，速度很快，且独立于浏览器运行。Node.js诞生也是基于V8引擎。

2009年，甲骨文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展示位方块状）