2023年6月21日发(作者：)
浏览器内核差异以及兼容性处理浏览器内核差异 浏览器最核⼼的部分是“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计划。浏览器兼容性处理浏览器兼容性浏览器兼容性问题⼜被称为⽹页兼容性或⽹站兼容性问题，指⽹页在各种浏览器上的显⽰效果可能不⼀致⽽产⽣浏览器和⽹页间的兼容问题。在⽹站的设计和制作中，做好浏览器兼容，才能够让⽹站在不同的浏览器下都正常显⽰。⽽对于浏览器软件的开发和设计，浏览器对标准的更好兼容能够给⽤户更好的使⽤体验。产⽣原因因为不同浏览器使⽤及所⽀持的（下的⼀个应⽤）等⽹页语⾔标准不同；以及⽤户客户端的环境不同（如分辨率不同）造成的显⽰效果不能达到理想效果。最常见的问题就是⽹页元素位置混乱，错位。解决⽅案对于⼀般⽤户来说应该⽤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:red9; /* IE6、IE7、IE8、IE9 识别 */color:red0; /* IE8、IE9 识别*/color:red90; /* 仅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:red9; } : /* 仅IE9识别 */--------------------------------------------------------------/* IE条件注释Hack 详情参见 */
注意：css hack虽然可以解决个浏览器之间css显⽰的差异问题，但是毕竟不符合W3C规范，我们平时写css最好是按照标准来，这样对我们以后维护也是⼤有好处的，实在不⾏再⽤。
2023年6月21日发(作者：)
浏览器内核差异以及兼容性处理浏览器内核差异 浏览器最核⼼的部分是“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计划。浏览器兼容性处理浏览器兼容性浏览器兼容性问题⼜被称为⽹页兼容性或⽹站兼容性问题，指⽹页在各种浏览器上的显⽰效果可能不⼀致⽽产⽣浏览器和⽹页间的兼容问题。在⽹站的设计和制作中，做好浏览器兼容，才能够让⽹站在不同的浏览器下都正常显⽰。⽽对于浏览器软件的开发和设计，浏览器对标准的更好兼容能够给⽤户更好的使⽤体验。产⽣原因因为不同浏览器使⽤及所⽀持的（下的⼀个应⽤）等⽹页语⾔标准不同；以及⽤户客户端的环境不同（如分辨率不同）造成的显⽰效果不能达到理想效果。最常见的问题就是⽹页元素位置混乱，错位。解决⽅案对于⼀般⽤户来说应该⽤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:red9; /* IE6、IE7、IE8、IE9 识别 */color:red0; /* IE8、IE9 识别*/color:red90; /* 仅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:red9; } : /* 仅IE9识别 */--------------------------------------------------------------/* IE条件注释Hack 详情参见 */
注意：css hack虽然可以解决个浏览器之间css显⽰的差异问题，但是毕竟不符合W3C规范，我们平时写css最好是按照标准来，这样对我们以后维护也是⼤有好处的，实在不⾏再⽤。
发布评论