浏览器内核以及解决兼容性的方法

浏览器内核：

分类：

1.Trident（IE内核）

Trident(IE内核)：该内核程序在1997年的IE4中首次被采用，是微软在Mosaic代码的基础之上修改而来的，并沿用到IE11，也被普遍称作”IE内核”。Trident实际上是一款开放的内核，其接口内核设计的相当成熟，因此才有许多采用IE内核而非IE的浏览器(壳浏览器)涌现。

由于IE本身的“垄断性”（虽然名义上IE并非垄断，但实际上，特别是从Windows 95年代一直到XP初期，就市场占有率来说IE的确借助Windows的东风处于“垄断”的地位）而使得Trident内核的长期一家独大，微软很长时间都并没有更新Trident内核，这导致了两个后果——一是Trident内核曾经几乎与W3C标准脱节（2005年），二是Trident内核的大量 Bug等安全性问题没有得到及时解决，然后加上一些致力于开源的开发者和一些学者们公开自己认为IE浏览器不安全的观点，也有很多用户转向了其他浏览器， Firefox和Opera就是这个时候兴起的。非Trident内核浏览器的市场占有率大幅提高也致使许多网页开发人员开始注意网页标准和非IE浏览器的浏览效果问题。

2.Gecko(Firefox内核)

Gecko(Firefox内核)：Netscape6开始采用的内核，后来的火狐也采用了该内核，Gecko的特点是代码完全公开，因此，其可开发程度很高，全世界的程序员都可以为其编写代码，增加功能。因为这是个开源内核，因此受到许多人的青睐，Gecko内核的浏览器也很多，这也是Gecko内核虽然年轻但市场占有率能够迅速提高的重要原因。

事实上，GECKO的由来跟IE不无关系，前面说过IE没有使用W3C的标准，这导致了微软内部一些开发人员的不满；他们与当时已经停止更新了的 Netscape的一些员工一起创办了Mozilla，以当时的Mosaic内核为基础重新编写内核，于是开发出了Gecko。不过事实上，Gecko 内核的浏览器仍然还是Firefox 用户最多，所以有时也会被称为Firefox内核。此外Gecko也是一个跨平台内核，可以在Windows、 BSD、Linux和Mac OS X中使用。

补充：JavaScript引擎是SpiderMonkey。

Gecko内核常见的浏览器：火狐、Mozilla SeaMonkey、Epiphany（早期版本）、Flock（早期版本）、K-Meleon

3.Presto(Opera前内核)

Presto(Opera前内核) (已废弃)： Opera12.17及更早版本曾经采用的内核，现已停止开发并废弃，该内核在2003年的Opera7中首次被使用，该款引擎的特点就是渲染速度的优化达到了极致，然而代价是牺牲了网页的兼容性。

实际上这是一个动态内核，与前面几个内核的最大的区别就在脚本处理上，Presto有着天生的优势，页面的全部或者部分都能够在回应脚本事件时等情况下被重新解析。此外该内核在执行Javascrīpt的时候有着最快的速度，根据在同等条件下的测试，Presto内核执行同等Javascrīpt所需的时间仅有Trident和Gecko内核的约1/3（Trident内核最慢，不过两者相差没有多大），本文的其中一个修改者认为上述测试信息过于老旧且不完整，因为他曾做过的小测试显示Presto部分快部分慢，各内核总体相当。那次测试的时候因为Apple机的硬件条件和普通PC机不同所以没有测试WebCore内核。只可惜Presto是商业引擎，使用Presto的除开Opera以外，只剩下NDSBrowser、Wii Internet Channle、Nokia 770网络浏览器等，这很大程度上限制了Presto的发展。Opera现已改用Google Chrome的Blink内核。

4.Webkit(Safari内核,Chrome内核原型,开源)

Webkit(Safari内核,Chrome内核原型,开源):它是苹果公司自己的内核，也是苹果的safari浏览器使用的内核。

WebKit内核常见的浏览器：傲游浏览器3、Symbian手机浏览器、Android 默认浏览器。

5.Blink

Blink是一个由Google和Opera Software开发的浏览器排版引擎，Google计划将这个渲染引擎作为Chromium计划的一部分，并且在2013年4月的时候公布了这一消息。这一渲染引擎是开源引擎WebKit中WebCore组件的一个分支，并且在Chrome（28及往后版本）、Opera（15及往后版本）和Yandex浏览器中使用。

浏览器内核的优缺点

Trident：这种浏览器内核是ie用的内核，因为在早期IE占有大量的市场份额，所以这种内核比较流行，以前有很多网页也是根据这个内核的标准来编写的，但是实际上这个内核对真正的网页标准支持不是很好，甚至在2005年，与网页标准制定组织(W3C理事会)所制定的标准发生了脱节，同时 Trident 内核本身的BUG比较多，对一些符合W3C标准的网页代码支持不是很好，这在早期的IE版本中比较明显，比如IE5.5以前(包括IE5.5)，其实ie6对W3C标准的支持也不是很好，而我们现在很多人都在使用IE6，事实上它也属于一个比较早的版本。

但是由于IE的高市场占有率，微软也很长时间没有更新Trident内核，这导致了二个结果
1，Trident内核和W3C标准脱节。
2，Trident内核的大量Bug等安全问题没有得到解决，加上一些专家学者公开自己认为IE浏览器不安全的观点，使很多用户开始转向其他浏览器，FF,Opera就是这时期兴起的。
Gecko：这是Firefox 和 Flock 所采用内核，这个内核的优点就是功能强大、丰富，可以支持很多复杂网页效果和浏览器扩展接口，但是代价是也显而易见就是要消耗很多的资源，比如内存。
Presto：Opera 采用的是 Presto内核，Presto内核被称为公认的浏览网页速度最快的内核，这得益于它在开发时的天生优势，在处理JS脚本等脚本语言时，会比其他的内核快3倍左右，缺点就是为了达到很快的速度而丢掉了一部分网页兼容性。

Webkit：Webkit 是 Safari 采用的内核，不过 Safari 是苹果系统下的浏览器(虽然也有windows版，但是比较少)，所以只简单介绍一下这个内核的优点和缺点，优点就是网页浏览速度较快，虽然不及 Presto 但是也胜于 Gecko 和 Trident，缺点是对于网页代码的容错性不高，也就是说对网页代码的兼容性较低，会使一些编写不标准的网页无法正确显示。

总结：就浏览器来说，互联网经历了十年的高速发展期，近几年市场上也推出了很多新的浏览器，但是他们并非是采用自主开发的内核，所以浏览器内核本身实际没有实质突破。

主浏览器所使用的内核分类

Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等
Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
Presto内核：Opera7及以上
Webkit内核：Safari,Chrome等

一、兼容性产生原因：

因为不同浏览器使用内核及所支持的HTML等网页语言标准不同；以及用户客户端的环境不同（如分辨率不同）造成的显示效果不能达到理想效果。最常见的问题就是网页元素位置混乱，错位。兼容性产生原因主要是内核或内核的版本不一样；

二、浏览器对网页兼容支持的解析模式：

1、为什么会有那么多模式？

由于历史的原因，各个浏览器在对页面的渲染上存在差异，甚至同一浏览器在不同版本中，对页面的渲染也不同。在W3C标准出台以前，浏览器在对页面的渲染上没有统一规范，产生了差异(Quirks mode或者称为Compatibility Mode)；由于W3C标准的推出，浏览器渲染页面有了统一的标准(CSScompat或称为Strict mode也有叫做Standars mode)，这就是二者最简单的区别。

2、浏览器采用哪种模式进行解析呢？

火狐一直工作在标准模式下，但IE（6，7，8）标准模式与怪异模式差别很大，主要体现在对盒子模型的解释上，

那么浏览器究竟该采用哪种模式渲染呢？这就引出的DTD，既是网页的头部声明，浏览器会通过识别DTD而采用相对应的渲染模式：

\1. 浏览器要使老旧的网页正常工作，但这部分网页是没有doctype声明的，所以浏览器对没有doctype声明的网页采用quirks mode解析。
\2. 对于拥有doctype声明的网页，什么浏览器采用何种模式解析，这里有一张详细列表可参考：http://hsivonen.iki.fi/doctype。
\3. 对于拥有doctype声明的网页，这里有几条简单的规则可用于判断：对于那些浏览器不能识别的doctype声明，浏览器采用strict mode解析。
\4. 在doctype声明中，没有使用DTD声明或者使用HTML4以下（不包括HTML4）的DTD声明时，基本所有的浏览器都是使用quirks mode呈现，其他的则使用strict mode解析。
\5. 可以这么说，在现有有doctype声明的网页，绝大多数是采用strict mode进行解析的。

\6. 在ie6中，如果在doctype声明前有一个xml声明(比如:<?xml version="1.0″ encoding="iso-8859-1″?>)，则采用quirks mode解析。这条规则在ie7中已经移除了。

3、如何设置为怪异模式（quirks mode）和标准模式（strict mode）：

3.1、设置怪异模式：

方法一：在页面项部加

方法二：什么也不加。

3.2、设置为标准模式：

加入以下任意一种：HTML4提供了三种DOCTYPE可选择：

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”><!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”><!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN” “http://www.w3.org/TR/html4/frameset.dtd”>

XHTML1.0提供了三种DOCTYPE可选择：

(1)过渡型（Transitional ）

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

(2)严格型（Strict ）

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

(3)框架型（Frameset ）

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN" “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

备注：过渡型和严格型的区别：

Transitional DOCTYPEs只是为了实现从旧时代到新时代的过渡，而且Strict DOCTYPEs是默认的文档声明，对构造HTML 4.01和XHTML 1.0都适用。

使用Transitional DOCTYPE一般是由于代码中含有过多陈旧的写法，并且一下子很难完全转换到Strict DOCTYPE来。但是Strict DOCTYPE才应该是你的目标。它鼓励甚至有时是强迫你把结构与表现区分开来，把表现层的代码都写在CSS里，将结构和表现分开，使得维护一个站点非常容易。

对于准备向Strict进发的人来说，两者的有些区别很可能会使开发者犯错误，接下来我将会谈到。 在Strict DOCTYPEs下不支持的标签 **：**center font iframe srike u 在Strict DOCTYPEs下不支持的属性 align (表格相关的支持：col, colgroup, tbody, td, tfoot, th, thead, and tr) language background bgcolor border (table支持) height (img和object支持) hspace name (在HTML 4.01 Strict中支持，XHTML 1.0 Strict中的form和img不支持) noshade nowrap target text, link, vlink, 和alink vspace width (img, object, table, col, 和 colgroup都支持) 内容模型的区别

元素类型的内容模型描述了什么样的元素类型实例可以被包含。这一点上，两种文档声明的最大区别在于blockquote, body, 和form元素仅能够包含块级元素，如：文本和图像不允许直接包含在body中，必须被p或者div等块级元素包含 input元素不能直接是form元素的下一层 blockquote元素内的文本，必须被p或者div等块级元素包含将所有的表现都交给CSS，恪守Strict标准

在向Strict DOCTYPEs过渡的过程中，了解每个元素是做什么的比知道每个元素长啥样有效的多。

4、如何判定现在是标准模式还是怪异模式：

方法一：执行以下代码
alert(window.top.document.compatMode) ;
//BackCompat 表示怪异模式
//CSS1Compat 表示标准模式

方法二：jquery为我们提供的方法，如下：
alert($.boxModel)

alert($.support.boxModel)

三、不同浏览器间的兼容问题及解决方法

1、 CSS resert： **抹去不同浏览器的默认属性，使得不同浏览器兼容性问题降到最低，**最好可以根据项目情况设置css resert代码。

缺点主要是：抹去浏览器默认属性、在浏览器调式工具有大量继承链

2、CSS hack

2.1 定义：CSS hack由于不同厂商的浏览器，比如Internet Explorer,Safari,火狐,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。这个时候我们就需要 **针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，**能在不同的浏览器中也能得到我们想要的页面效果， *CSS hack书写顺序，一般是将适用范围广、被识别能力强的CSS定义在前面。*

2.2 分类

CSS Hack大致有3种表现形式， **CSS属性前缀法、选择器前缀法以及IE条件注释法（即HTML头部引用if IE）Hack，**实际项目中CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。

解决兼容性的办法：

一、样式初始化

由于各大浏览器会有自身的默认样式，并且不尽相同，所以为了尽可能的保证样式的统一性，前端在开发项目之前都会先进行样式格式化，最常见的分为以下几个方面。

1. pandding 值和 margin 值均设置为 0

将html、body、a、li、ol、input、textarea、select、button 等标签的 padding 值和 margin 值设置为 0。

2.html 标签

设置统一的字体，如果使用 rem 单位，则 html 需要设置合适的字号。

3.a 标签

设置统一的颜色，将 text-decoration 属性设置为 none。

4.ol 和 li 标签

list-style 统一设置为 none。

5.input、textarea、select、button 等标签初始化

border 设置为 none；

二、使用不同类型的浏览器内核前缀

1.Chrome（谷歌浏览器）与 Safari（苹果浏览器）内核：Webkit （中译无）前缀：-webkit-

2.IE （IE浏览器）内核：Trident （中译三叉戟）前缀：-ms-

3.Firefox （火狐浏览器）内核：Gecko（中译壁虎）前缀：-moz-

4.Opera （欧朋浏览器）内核：Presto（中译迅速）前缀：-o-

-webkit-border-radius: 10px; /*谷歌浏览器*/
-ms-border-radius: 10px;     /*IE浏览器*/
-moz-border-radius: 10px;    /*火狐浏览器*/
-o-border-radius: 10px;      /*欧朋浏览器*/
border-radius: 10px;

三、针对IE浏览器不同版本的解决方案（CSS hack）;

1.对于低版本的 IE 浏览器使用 CSS hack（即给特点前缀）

注：以下符号是写在属性名前面。

兼容 IE6 的 hack 符号：- 或 _

兼容 IE6 、7 的 hack 符号：` ~ ! @ # $ % ^ & * ( ) + = [ ] | < > , . 任意一个符号

兼容 IE6、7、8 的 hack 符号：.

注：以下符号是写在属性值与分号直接，中间不留空格。

兼容 IE8 的 hack 符号：\0/

兼容 IE8、9、10 的 hack 符号：\0

兼容 IE6、7、8、9、10 的 hack 符号：\9

/*hack符号在前*/
_border-radius: 10px;   /*IE6*/
+border-radius: 10px;   /*IE6\7*/
.border-radius: 10px;   /*IE6\7\8*//*hack符号在后*/
border-radius: 10px\0/;   /*IE8*/
border-radius: 10px\0;   /*IE8\9\10*/
border-radius: 10px\9;   /*IE6\7\8\9\10*/

2.为不同的版本编写独立的样式，其他浏览器识别不到。

大于 IE9 的浏览器使用这个单独的 style9.css 样式

<!--[if gte IE 9]> <link rel="stylesheet" href="style9.css">
<![endif]-->

只有 IE6 浏览器使用的 style6.css 样式

<!--[if IE ６]><link rel="stylesheet" href="style6.css">
<![endif]-->

四、其他特殊样式

1.cursor 属性的 hand 值和 pointer 值

问题：firefox 浏览器不支持 hand 值，但其他浏览器均支持 pointer 值。
解决: 统一使用 cursor 属性的 pointer 值。

2.水平居中

问题：IE8 及IE8 以下版本浏览器不可通过设置 margin:0 auto 实现水平居中。
解决: 可通过设置父级 text-align:center 实现。

3.属性值 "inherit"

问题：IE8 及IE8 以下版本浏览器不支持属性值 “inherit”。
解决：谨慎使用属性值 “inherit”。

五、JS兼容性

1.ES6语法

问题：IE11 不支持箭头函数、class 语法等（报 SCRIPT1002: 语法错误），不支持 Set 和 Map 数据结构（不报错）及 Promise 对象，支持 let 和 const，IE10 及以下不支持任何 ES6 语法。
解决：如果要兼容IE浏览器的项目请使用 ES5 语法或者使用 Babel 进行转换。

2.操作 tr 标签

问题：IE9 及 IE9 以下版本浏览器，不能操作 tr 标签的 innerHTML 属性。
解决：可以操作 td 标签的 innerHTML 属性。

3.Ajax

问题：IE9 及 IE9 以下版本浏览器无法使用 Ajax 获取接口数据。
解决：在使用 Ajax 请求之前设置 jQuery.support.cors=true。

4.event 对象的 srcElement 属性

问题：IE8 及 IE8 以下版本浏览器 event 对象只有 srcElement 属性，没有 target 属性。
解决：obj = event.target?event.target:event.srcElement。

5.DOM 事件绑定

问题：IE8 及 IE8 以下版本浏览器是用 attachEvent() 方法，而其他浏览器是 addEventListener() 方法。
解决：判断 IE 浏览器版本，如果是 IE8 及以下事件绑定则使用 attachEvent() 方法，注意 attachEvent() 方法的用法，第一个参数为“onclick” 而不是“click”。并且没有第三个参数。