浏览器内核分类及不一样版本的样式区别

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、区别几种浏览器 
第一步，咱们能够给出一个默认的样式表，可以最大地兼容流行浏览器。 

复制代码

代码以下:

<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里的不等于判断符相同 

3、IE浏览器几种版本的样式区别 
由于CSS3在IE9下是能够正常渲染，可是在IE8及如下版本不支持，此时咱们又想让IE8及如下浏览器可以实现一样的效果。 

复制代码

代码以下:

“\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{} }