瀏覽器內核分類及不一樣版本的樣式區別

1、流行瀏覽器內核分類 
一、Trident內核,表明產品IE。Trident(又稱爲MSHTML),是微軟開發的一種排版引擎。Trident只能用於Windwos平臺。 
二、Gecko內核,表明做品Mozilla Firefox。Gecko是一套開放源代碼的、以C++編寫的網頁排版引擎。它的最大優點是跨平臺,能在Microsoft Windows、Linux和MacOS X等操做系統上運行,並且它提供了一個豐富的程序界面以供互聯網相關的應用程式使用,例如網頁瀏覽器、HTML編輯器、客戶端/服務器等等。Gecko是最流行的排版引擎之一,僅次於Trident。 
三、WebKit內核,主要表明做品有Safari和Google的瀏覽器Chrome。 webkit 是一個開源項目,包含了來自KDE項目和蘋果公司的一些組件,它的特色在於源碼結構清晰、渲染速度極快。缺點是對網頁代碼的兼容性不高,致使一些編寫不標準的網頁沒法正常顯示。Google的Android平臺瀏覽器、Apple的iPhone瀏覽器、Nokia S60瀏覽器等所使用的瀏覽器內核引擎,都是基於WebKit引擎的。 WebKit內核也普遍應用於Widget引擎產品,包括中國移動的BAE、Apple的Dashboard以及Nokia WRT在內採用的均爲WebKit引擎。 
四、Presto內核,表明做品Opera。Presto是由Opera Software開發的瀏覽器排版引擎,供Opera 7.0及以上使用。它取代了舊版Opera 4至6版本使用的Elektra排版引擎,包括加入動態功能,例如網頁或其部分可隨着DOM及Script語法的事件而從新排版。在執行JavaScript時有着最快的速度。 Presto在推出後不斷有更新版本推出,使很多錯誤得以修正,以及閱讀Javascript效能得以最佳化,併成爲速度最快的引擎,這也是Opera被公認爲速度最快的瀏覽器的基礎。主要應用於手機平臺。 

2、區別幾種瀏覽器 
第一步,咱們能夠給出一個默認的樣式表,可以最大地兼容流行瀏覽器。 

javascript

複製代碼
代碼以下:

<link rel="stylesheet" type="text/css" href="style.css" /> 


第二步,用IF語句來判斷瀏覽器。 

php

複製代碼
代碼以下:

<!--[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裏的不等於判斷符相同 

3、IE瀏覽器幾種版本的樣式區別 
由於CSS3在IE9下是能夠正常渲染,可是在IE8及如下版本不支持,此時咱們又想讓IE8及如下瀏覽器可以實現一樣的效果。 

css

複製代碼
代碼以下:

「\9″ 只在IE6/IE7/IE8/IE9/IE10下生效 
「\0」 只在 IE8/IE9/IE10下生效 
「\9\0」 只在IE9/IE10下生效 


若是隻須要針對IE8的CSS,可先使用在IE8/IE9/IE10生效的「\0,再用僅在IE9/IE10生效的「\9\0」覆蓋以前的樣式。 
例如: 

java

複製代碼
代碼以下:

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的樣式 

web

複製代碼
代碼以下:
#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{} } 
相關文章
相關標籤/搜索