流行瀏覽器內(nèi)核分類及樣式區(qū)別

一、流行瀏覽器內(nèi)核分類

　　1、Trident內(nèi)核，代表產(chǎn)品IE。Trident（又稱為MSHTML），是微軟開發(fā)的一種排版引擎。Trident只能用于Windwos平臺。 

　　2、Gecko內(nèi)核，代表作品Mozilla Firefox。Gecko是一套開放源代碼的、以C++編寫的網(wǎng)頁排版引擎。它的大優(yōu)勢是跨平臺，能在Microsoft Windows、Linux和MacOS X等操作系統(tǒng)上運行，而且它提供了一個豐富的程序界面以供互聯(lián)網(wǎng)相關(guān)的應(yīng)用程式使用，例如網(wǎng)頁瀏覽器、HTML編輯器、客戶端/服務(wù)器等等。Gecko是流行的排版引擎之一，僅次于Trident。 

　　3、WebKit內(nèi)核，主要代表作品有Safari和Google的瀏覽器Chrome。 webkit 是一個開源項目，包含了來自KDE項目和蘋果公司的一些組件，它的特點在于源碼結(jié)構(gòu)清晰、渲染速度極快。缺點是對網(wǎng)頁代碼的兼容性不高，導(dǎo)致一些編寫不標準的網(wǎng)頁無法正常顯示。Google的Android平臺瀏覽器、Apple的iPhone瀏覽器、Nokia S60瀏覽器等所使用的瀏覽器內(nèi)核引擎，都是基于WebKit引擎的。 WebKit內(nèi)核也廣泛應(yīng)用于Widget引擎產(chǎn)品，包括中國移動的BAE、Apple的Dashboard以及Nokia WRT在內(nèi)采用的均為WebKit引擎。 

　　4、Presto內(nèi)核，代表作品Opera。Presto是由Opera Software開發(fā)的瀏覽器排版引擎，供Opera 7.0及以上使用。它取代了舊版Opera 4至6版本使用的Elektra排版引擎，包括加入動態(tài)功能，例如網(wǎng)頁或其部分可隨著DOM及Script語法的事件而重新排版。在執(zhí)行JavaScript時有著快的速度。 Presto在推出后不斷有更新版本推出，使不少錯誤得以修正，以及閱讀Javascript效能得以佳化，并成為速度快的引擎，這也是Opera被公認為速度快的瀏覽器的基礎(chǔ)。主要應(yīng)用于手機平臺。

二、區(qū)別幾種瀏覽器

　　第一步，我們可以給出一個默認的樣式表，能夠大地兼容流行瀏覽器。

<link rel="stylesheet" type="text/css" href="style.css" />
第二步，用IF語句來判斷瀏覽器。

<!--[if IE]>
這段文字只在IE瀏覽器上顯示
<![endif]-->

<!--[if IE 6]>
這段文字只在IE6瀏覽器上顯示
<![endif]-->

<!--[if gt IE 6]>
這段文字只在IE6以上版本IE瀏覽器上顯示
<![endif]-->

<!--[if ! IE 7]>
這段文字在非IE7瀏覽器上顯示
<![endif]-->

<!--[if !IE]><!-->
這段文字只在非IE瀏覽器上顯示
<!--<![endif]-->

 詞語解釋：

lte：就是Less than or equal to的簡寫，也就是小于或等于的意思。

lt ：就是Less than的簡寫，也就是小于的意思。

gte：就是Greater than or equal to的簡寫，也就是大于或等于的意思。

gt ：就是Greater than的簡寫，也就是大于的意思。

! ：就是不等于的意思，跟javascript里的不等于判斷符相同

　　三、IE瀏覽器幾種版本的樣式區(qū)別

　　因為CSS3在IE9下是可以正常渲染，但是在IE8及以下版本不支持，此時我們又想讓IE8及以下瀏覽器能夠?qū)崿F(xiàn)同樣的效果。

“\9″      只在IE6/IE7/IE8/IE9/IE10下生效
“\0”      只在 IE8/IE9/IE10下生效
“\9\0”    只在IE9/IE10下生效
如果只需要針對IE8的CSS，可先使用在IE8/IE9/IE10生效的“\0，再用僅在IE9/IE10生效的“\9\0”覆蓋之前的樣式。

例如：

selector{
color:#000;color:#F00\0;       /* only for IE8&IE9&IE10 */
color:#000\9\0;            　　 /* only for IE9&IE10 */
}
 這樣就能在IE8中的顏色顯示為：#F00

下面是IE5~IE9，Opera 9.5-9.6/FF 3.51-FF4,Safari,Google Chrome,Opera9.2,FF2/FF3.0/K-Meleon的樣式

#example{
background:#036;                        　　　/*Moz (& All browsers  FF2/FF3.0/K-Meleon) 藍色(#036)*/
_background:#F00;                       　　  /*IE5 (& IE5.5/IE6) 紅色(#F00)*/
/background:#630;                           　/*IE8 beta1 褐色(#630)*/

background:#09F\0;                       　　 /*IE8/IE9 */
background:#09F\0/;                       　　/*IE8 only 藍色(#09F)*/
}
:root #example { background:#963\0 }    　　　/*IE9 only 咖啡色(#963)*/
#example{                               
*background:#f60;                         　 /*IE7 (& IE5.5/IE6) 橘色(#f60)*/
_background:#000;                        　　/*IE6 (& IE5.5) 黑色(#000)*/
_background:#390;                        　　/*IE5.5 綠色(#390)*/

}
@media all and (min-width:0){            　　/*webkit and opera */
#example{background:#f06;}                  /*Opera 9.5-9.6/FF 3.51-FF4, 粉色(#f06)*/
}
@media screen and (-webkit-min-device-pixel-ratio:0){
#example{background:#609;}                  /*webkit (& Safari,Google Chrome,Opera9.2, 紫色(#609)*/
}

/* webkit */
@media screen and (-webkit-min-device-pixel-ratio:0){ #example{} }
/* opera */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { #example{} }
/* firefox */
@-moz-document url-prefix(){ #example{} }