今天小编跟大家讲解下有关流行浏览器内核分类及不同版本的样式区别 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关流行浏览器内核分类及不同版本的样式区别 的相关资料，希望小伙伴们看了有所帮助。
一、流行浏览器内核分类 1、Trident内核 代表产品IE。Trident（又称为MSHTML） 是微软开发的一种排版引擎。Trident只能用于Windwos平台。 2、Gecko内核 代表作品Mozilla Firefox。Gecko是一套开放源代码的、以C++编写的网页排版引擎。它的最大优势是跨平台 能在Microsoft Windows、Linux和MacOS X等操作系统上运行 而且它提供了一个丰富的程序界面以供互联网相关的应用程式使用 例如网页浏览器、HTML编辑器、客户端/服务器等等。Gecko是最流行的排版引擎之一 仅次于Trident。 3、WebKit内核 主要代表作品有Safari和Google的浏览器Chrome。 webkit 是一个开源项目 包含了来自KDE项目和苹果公司的一些组件 它的特点在于源码结构清晰、渲染速度极快。缺点是对网页代码的兼容性不高 导致一些编写不标准的网页无法正常显示。Google的Android平台浏览器、Apple的iPhone浏览器、Nokia S60浏览器等所使用的浏览器内核引擎 都是基于WebKit引擎的。 WebKit内核也广泛应用于Widget引擎产品 包括中国移动的BAE、Apple的Dashboard以及Nokia WRT在内采用的均为WebKit引擎。 4、Presto内核 代表作品Opera。Presto是由Opera Software开发的浏览器排版引擎 供Opera 7.0及以上使用。它取代了旧版Opera 4至6版本使用的Elektra排版引擎 包括加入动态功能 例如网页或其部分可随着DOM及script语法的事件而重新排版。在执行Javascript时有着最快的速度。 Presto在推出后不断有更新版本推出 使不少错误得以修正 以及阅读Javascript效能得以最佳化 并成为速度最快的引擎 这也是Opera被公认为速度最快的浏览器的基础。主要应用于手机平台。 二、区别几种浏览器 第一步 我们可以给出一个默认的样式表 能够最大地兼容流行浏览器。 复制代码代码如下: <link rel="stylesheet"type="text/css"href="https://www.aidi.net.cn//css/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浏览器几种版本的样式区别 因为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; color:#000\9\0; } 这样就能在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; _background:#F00; /background:#630; background:#09F\0; background:#09F\0/; } :root #example { background:#963\0 } #example{ *background:#f60; _background:#000; _background:#390; } @media all and (min-width:0){ #example{background:#f06;} } @media screen and (-webkit-min-device-pixel-ratio:0){ #example{background:#609;} } @media screen and (-webkit-min-device-pixel-ratio:0){ #example{} } @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { #example{} } @-moz-document url-prefix(){ #example{} }来源：爱蒂网
