浏览器主流内核及对应CSS hack技巧总结

浏览器最核心的部分是渲染引擎（Rendering Engine），我们一般习惯称之为“浏览器内核”，其负责解析网页语法（如HTML、JavaScript）并渲染、展示网页。因此，所谓的浏览器内核通常也就是指浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解析也有所不同，因此同一网页在不同的内核浏览器里的渲染、展示效果也可能不同。

一：主流浏览器内核介绍

主流浏览器内核分类：浏览器内核种类繁多，商用的加上非商业的免费内核，大约有10款以上甚至更多，不过通常比较常见的大约只有以下4种，下面就简单介绍一下。

（1）Trident

Trident（又称为MSHTML），是微软的Windows搭载的网页浏览器——Internet Explorer浏览器使用的内核（俗称IE内核），该内核程序在1997年的IE 4中首次被采用，之后不断地加入新的技术并随着新版本的IE发布。Trident实际上是一款开放的内核，Trident引擎被设计成一个软件组件（模块），使得其他软件开发人员很容易将网页浏览功能加到他们自行开发的应用程序里，其接口内核设计相当成熟，因此才涌现出许多采用IE内核而非IE的浏览器（如Maxthon、软媒的闪游浏览器、腾讯的TT、GreenBrowser等），但是Trident只能用于Windows平台。

由于IE本身的“垄断性”而使得Trident内核在很长时间内都是一家独大，微软也在相当长一段时间内都没有更新Trident内核，这就导致了两个后果——一是Trident内核曾经几乎与W3C标准脱节；二是Trident内核的大量Bug等安全性问题没有得到及时解决。目前，微软对Trident排版引擎做了重大变动，除了加入新的技术之外，还增加了对网页标准的支持。尽管这些变动已经在相当大的程度上落后了其他的排版引擎，如Gecko、WebCore、KHTML及Presto。

（2）Gecko

Gecko是开放源代码、以C++编写的网页排版引擎，目前被Mozilla家族网页浏览器以及Netscape 6以后版本浏览器所使用。这款软件原本是由网景通讯公司开发的，现在则由Mozilla基金会维护。由于Gecko的特点是代码完全公开，因此，其可开发程度很高，全世界的程序员都可以为其编写代码，增加功能。因为这是个开源内核，因此受到许多人的青睐，采用Gecko内核的浏览器也很多，这也是Gecko内核虽然年轻但市场占有率能够迅速提高的重要原因。

Gecko排版引擎提供了一个丰富的程序界面以供与互联网相关的应用程序使用，例如网页浏览器、HTML编辑器、客户端/服务器等。虽然最初的主要对象是Mozilla的衍生产品，如Netscape和Mozilla Firefox，但是现在已有很多其他软件利用这个排版引擎。此外Gecko也是一个跨平台内核，可以在Windows、BSD、Linux和Mac OS X中使用。

Gecko是最流行的排版引擎之一，其流行程度仅次于Trident。使用Gecko引擎的浏览器有Firefox、网景6～9、SeaMonkey、Camino、Mozilla、Flock、Galeon、K-Meleon、Minimo、Sleipni、Songbird、XeroBank。Google Gadget引擎采用的就是Gecko浏览器引擎。

（3）Presto

Presto是一个由Opera Software开发的浏览器排版引擎，目前Opera 7.0～10.00版本使用该款引擎。Presto的特点就是渲染速度的优化达到了极致，它是目前公认的网页浏览速度最快的浏览器内核，然而代价是牺牲了网页的兼容性。

Presto实际上是一个动态内核，与Trident、Gecko等内核的最大区别就在于脚本处理上，Presto有着天生的优势，页面的全部或者部分都能够在回应脚本事件时等情况下被重新解析。此外该内核在执行JavaScript时有着最快的速度，根据同等条件下的测试，Presto内核执行同等JavaScript所需的时间仅有Trident和Gecko内核的约1/3。不过，不足之处在于Presto是商业引擎，使用Presto的除了Opera以外，只剩下NDS Browser、Nokia 770网络浏览器等，这在很大程度上限制了Presto的发展。 Opera Widget引擎采用的就是Presto引擎。

（4）WebKit

WebKit 是一个开放源代码的浏览器引擎（Web Browser Engine），WebKit最初的代码来自KDE的KHTML和KJS（它们均为开放源代码，都是自由软件，在GPL协议下授权）。所以WebKit也是自由软件，同时开放源代码。

除了Safari浏览器，Mac下还有OmniWeb、Shiira等人气很高的浏览器。Google的chrome也使用WebKit作为内核。 WebKit内核在手机上的应用也十分广泛，例如Google的Android平台浏览器、Apple的iPhone浏览器、Nokia S60浏览器等所使用的浏览器内核引擎，都是基于WebKit引擎的。 WebKit内核也广泛应用于Widget引擎产品，包括中国移动的BAE、Apple的Dashboard以及Nokia WRT在内采用的均为WebKit引擎。

二：针对四种内核的浏览器的css hack

浏览器百花齐放，而又标准不尽相同，可苦了我们这些前端仔们，辛苦coding完了代码，又要调试各种主流浏览器的兼容性，IE这个奇葩的浏览器家族就出了IE6/7/8/9,老10也马上要出来了。。。下面分享一些在工作中总结的css hack技巧。

#demo{ width:100px; height:100px; background:#639; background:#999\9; background:#03C\0; +background:#F39; _background:#CF3; }/*FF IE IE8 IE7 IE6*/
:root #demo { background:#0F0\9; } /*IE9*/
@media all and (min-width:0px){ #demo {background:#000\0; } } /*opera*/
@media screen and (-webkit-min-device-pixel-ratio:0){ #demo {background:#F0F;} } /*chrome safrai*/
/*另测试了电脑上装的搜狗浏览器4.0版本与360安全浏览器6.0版本，发现他们的表现均与chrome表现一样，表明这俩款浏览器至少采用的有webkit内核*/
以上CSS hack顺序：FF浏览器；所有IE；IE8；IE7；IE6；IE9；oprea；chrom与safrai，均已经过本人亲身测试通过，各位看官尽管使用~怎么样，将主流的四种内核的浏览器css hack一网打尽！！！至于一些多核浏览器，视具体情况调整。若您有更好的方法，请留言，欢迎交流~~