浏览器内核差异以及兼容性处理

浏览器内核差异

　　浏览器最核心的部分是“Rendering Engine”，即“渲染引擎”，我们一般叫做浏览器内核。它主要的功能是解释网页中的语法并渲染网页。所以渲染引擎决定了浏览器如何显示网页内容以及页面的格式信息。不同的浏览器内核对网页语法的解释不尽相同，这就导致了不同浏览器渲染出的网页可能有一些差异。

　　比较出名的浏览器内核有以下几种：KHTML、Trident、Gecko、Presto、Webkit、Blink。

 

　　Trident内核就是我们所熟知的IE浏览器的内核，该内核在IE4中首次采用，沿用到IE11，俗称“IE内核”。一直到Windows XP时期，由于Windows的市场占有率非常高导致IE多年一家独大，微软长时间没有更新Trident内核产生了不好的后果：一是Trident内核几乎与W3C的标准脱节；二是Trident大量的Bug没有得到及时解决带来的安全问题等。很多用户开始转投其他浏览器，Firefox和Opera就是在这个时候兴起的。

　　另外，很多国产浏览器都是“双核浏览器”，其中一个核心是Trident，另一个常见的是Webkit。比如遨游浏览器、360安全浏览器等。

 

　　Gecko内核是Firefox采用的内核，开始于Netscape6。Gecko的特点是代码完全公开，可开发程度很高。Gecko的出现和IE也不无关系，当年IE与W3C标准严重脱节导致内部一些开发人员不满，他们与当时已经停止更新的Netscape的一些员工创办了Mozilla，以当时的Mosaic内核为基础重新编写了内核，于是就有了Gecko。

　　Gecko内核的浏览器仍然是Firefox的用户最多，多以有时候也会被称为Firefox内核，Gecko内核也是一个跨平台的内核。

 

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

　　Presto是一个动态内核，在脚本处理上Presto有着天生的优势，页面的全部或者部分都能够在回应脚本事件时等情况下被重新解析。此外该内核在执行javascript的时候有着最快的速度，根据在同等条件下的测试，Presto内核执行同等Javascript所需的时间仅有Trident和Gecko内核的三分之一（也有人测试说Presto渲染部分快部分慢，总体和其他内核差不多）。可惜Presto是商业引擎，很大程度上限制了内核的发展。现在Opera改用Google Chrome相同的Blink内核。

 

　　Webkit内核是苹果公司自己的内核，也是苹果Safari浏览器使用的内核。Webkit引擎包含WebCore排版引擎和JavascriptCore解析引擎，均从KDE的KHTML引擎衍生而来，基于GPL开源。Google Chrome使用了Webkit内核，在脚本解析上Chrome使用了自家研发的V8引擎。

　　现在许多手机浏览器使用的都是Webkit内核，苹果自带Safari，Android的默认浏览器等。

 

　　Blink是由Google和Opera Software开发的浏览器排版引擎，于2013年4月公布了这一消息。该渲染引擎是开源引擎Webkit中Webcore组件的一个分支，并且在Chrome（28及往后版本）、Opera（15及往后版本）和Yandex浏览器中使用。

　　而在Google作出此举之际，Mozilla与Samsung也达成合作开发协议开发下一代浏览器渲染引擎Servo。

 

　　KHTML是网页排版引擎之一，由KDE开发。KHTML拥有速度快捷的优点，但对错误语法的容忍度则比Mozilla产品所使用的Gecko引擎小。苹果电脑于2002年采纳了KHTML，作为开发Safari浏览器之用，并发布所修改的最新及过去版本源代码。后来发表了开放源代码的WebCore及WebKit引擎，它们均是KHTML的衍生产品，在开发网站列出引擎改变内容，并会传回至KDE计划。

浏览器兼容性处理

浏览器兼容性

浏览器兼容性问题又被称为网页兼容性或网站兼容性问题，指网页在各种浏览器上的显示效果可能不一致而产生浏览器和网页间的兼容问题。在网站的设计和制作中，做好浏览器兼容，才能够让网站在不同的浏览器下都正常显示。而对于浏览器软件的开发和设计，浏览器对标准的更好兼容能够给用户更好的使用体验。

产生原因

因为不同浏览器使用内核及所支持的HTML（标准通用标记语言下的一个应用）等网页语言标准不同；以及用户客户端的环境不同（如分辨率不同）造成的显示效果不能达到理想效果。最常见的问题就是网页元素位置混乱，错位。

解决方案

对于一般用户来说
应该用ie8兼容模式浏览网页, 而不应该用ie9或ie10渲染模式. 很多用户安装ie10后发生很多网页显示错乱, 就是兼容性的原因, 因为ie10默认的渲染模式是ie10. 此时应该将其改为ie7渲染模式。

为什么用ie6/7渲染模式的原因如下:
中国所有网页肯定都支持ie, 支持ie就是支持ie内核的所有浏览器. 但并不一定支持chrome, firefox, 双核浏览器的高速模式, 原因很简单, 网页开发人员没有那么多时间和精力去兼容及测试那么多浏览器, 开发人员能让网页在ie下正常工作已经不错了, 就这还老得加班呢, 还有很多新需求和bug，测试人员还要去改。

渲染模式和网页打开速度几乎没有关系, 用户感觉不到.

对于网站开发者来说
目前暂没有统一的能解决这样的工具，最普遍的解决办法就是不断的在各浏览器间调试网页显示效果，通过对css样式控制以及通过脚本判断并赋予不同浏览器的解析标准。
如果所要实现的效果可以使用框架，那么还有另一个解决办法是在开发过程中使用当前比较流行的JS，CSS框架，如jQuery，YUI等等，因为这些框架无论是底层的还是应用层的一般都已经做好了浏览器兼容，所以可以放心使用。除此之外，CSS提供了很多hack接口可供使用，hack既可以实现跨浏览器的兼容，也可以实现同一浏览器不同版本的兼容。

什么是CSS Hack？

　　不同的浏览器对CSS的解析结果是不同的，因此会导致相同的CSS输出的页面效果不同，这就需要CSS Hack来解决浏览器局部的兼容性问题。而这个针对不同的浏览器写不同的CSS 代码的过程，就叫CSS Hack。

CSS Hack 形式

　　CSS Hack大致有3种表现形式：CSS属性Hack、CSS选择符Hack以及IE条件注释Hack， Hack主要针对IE浏览器。

　　1、属性级Hack：比如IE6能识别下划线"_"和星号" * "，IE7能识别星号" * "，但不能识别下划线"_"，而firefox两个都不能认识。等等

　　2、选择符级Hack：比如IE6能识别*html .class{}，IE7能识别*+html .class{}或者*:first-child+html .class{}。等等

　　3、IE条件注释Hack：比如针对所有IE：，针对IE6及以下版本：，这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。

　　注意书写顺序：一般是将识别能力强的浏览器的CSS写在后面。通常先写FF等非IE浏览器所需样式，其次写IE8所需样式，接着是IE7的，再接着才是IE6的。

常用CSS hack

以 color:red 将字体设置为红色为例：

/* CSS属性级Hack */
color:red;    /* 所有浏览器可识别*/
_color:red;     /*  仅IE6 识别 */
*color:red;    /*  IE6、IE7 识别 */
+color:red;    /*  IE6、IE7 识别 */
*+color:red;    /*  IE6、IE7 识别 */
[color:red;    /*  IE6、IE7 识别 */
color:red\9;    /* IE6、IE7、IE8、IE9 识别 */
color:red\0;    /* IE8、IE9 识别*/
color:red\9\0;    /* 仅IE9识别 */
color:red \0;    /* 仅IE9识别 */
color:red!important; /* IE6 不识别!important 详情参见*/
-------------------------------------------------------------
/* CSS选择符级Hack */
*html #demo { color:red;}   /*  仅IE6 识别 */
*+html #demo { color:red;}  /*  仅IE7 识别 */
body:nth-of-type(1) #demo { color:red;} /* IE9+、FF3.5+、Chrome、Safari、Opera 可以识别 */
head:first-child+body #demo { color:red; } /* IE7+、FF、Chrome、Safari、Opera 可以识别 */
:root #demo { color:red\9; } : /* 仅IE9识别 */
--------------------------------------------------------------
/* IE条件注释Hack　详情参见 */
 
 
 



 

　　注意：css hack虽然可以解决个浏览器之间css显示的差异问题，但是毕竟不符合W3C规范，我们平时写css最好是按照标准来，这样对我们以后维护也是大有好处的，实在不行再用。