阅读器内核以及阅读器兼容的题目剖析-百分百源码网

阅读器内核以及阅读器兼容的题目剖析

发布时间：09/01 来源：未知浏览：关键词：

本篇文章给大家带来的内容是关于阅读器内核乃至阅读器兼容的问题剖析，有必然的参照价值，有需要的伴侣可以参照一下，但愿对你有所帮忙。

一、阅读器内核

?Rendering Engine，中文翻译过来名称许多，排版引擎、说明引擎、渲染引擎，此刻流行称为阅读器内核。用来渲染网页内容的，将网页的内容和排版代码转换为可视的页面，一个阅读器大概不止有一个内核。

1、排版引擎

（1）Trident（Windows）360 IE
（2）Gecko（跨平台）Mozilla Firefox、Mozilla SeaMonkey
（3）KHTML（Linux）Konqueror
（4）WebKit（跨平台）Apple Safari、Symbian系统阅读器
（5）Chromium（跨平台） Chromium、Google Chrome、SRWare Iron、Comodo Dragon
（6）Presto（跨平台）Opera

阅读器	内核
IE、baidu、世界之窗	Trident
chrome、opera	chromium或称Blink
360、猎豹、2345阅读器	IE+chromium
Firefox	Gecko
Safari	Webkit
搜狗、翱翔、QQ阅读器	trident+webkit

2、JavaScript引擎

（1）Chakra
查克拉，IE9启用的新的JavaScript引擎。
（2）SpiderMonkey/TraceMonkey/JaegerMonkey
SpiderMonkey利用在Mozilla Firefox 1.0-3.0，TraceMonkey利用在Mozilla Firefox 3.5-3.6版本，JaegerMonkey利用在Mozilla Firefox 4.0及后续的版本。
（3）V8
利用于Chrome、傲游3。
（4）Nitro
利用于Safari 4及后续的版本。
（5）Linear A/Linear B/Futhark/Carakan
Linear A利用于Opera 4.0-6.1版本，Linear B利用于Opera 7.0～9.2版本，Futhark利用于Opera 9.5-10.2版本，Carakan利用于Opera 10.5及后续的版本。
（6）KJS
KHTML对应的JavaScript引擎。

3、单双核引擎

（1）Trident/Gecko双核阅读器
（2）Trident/WebKit双核阅读器
此刻国内最主流的“双核”阅读器根本都是这个架构，360极速阅读器、世界之窗阅读器极速版、傲游3搜狗阅读器3、QQ阅读器、枫树阅读器、快快阅读器、baidu阅读器、阿云阅读器（后期版本）、太阳花阅读器，其中最奇葩的是傲游3。其它双核阅读器都是基于Chromium的，而傲游是基于WebKit的，但是偏偏又用的是V8引擎。
（3）Trident/Gecko/WebKit三核阅读器
当前能见的应当就是小日本的Lunascape，Avant增添了WebKit内核之后也会归类到这里。说实话，Lunascape真的很难用，真的很奇葩。各个内核相对独立，外壳本身不足强化，不乱性不高，所以还不如用回单核阅读器。

二、兼容性问题

对阅读器兼容问题，一样分，HTML，Javascript兼容，CSS兼容。其中html相关问题比力容易处置，无非是高版本阅读器用了低版本阅读器没法识别的元素，致使其不克不及解析，所以平常留意一点就是。特殊是HTML5增添了很多新标签，低版本阅读器有点影响时代进步啊

1、css兼容

（1）不一样阅读器的margin和padding的默许设定差距大，使用*{margin:0px;padding:0px;}
（2）ie6、7和翱翔里这个标签的高度不受操纵，超出本人设定的高度.在此标签中参加overflow:hidden
（3）图片默许有间距,使用float
（4）盒子坍塌，父元素参加（overflow:hidden；）变成BFC元素
（5）字体大小在不一样阅读器里不一致，使用line-height:14px;指定高度
（6）IE6 不支撑 png 透亮结果
（7）CSS Hack兼容性属性设定

2、html兼容

HTML 篇
（1）样式兼容性问题

<meta http-equiv="X-UA-Compatible" content="IE=Edge" />

<meta http-equiv="X-UA-Compatible" content="IE=Emulate7" />

（2）怪异模式
怪异模式是没有遵照 W3C 标准的一种兼容模式，其中的 width 是包罗 contentWidth, 摆布padding, 摆布border 在内的全部范畴(height 也一样)，相似于 box-sizing: border-box;，并且 table 的 font-size 不克不及从父元素继承。以下状况会触发阅读器怪异模式(Quirks Mode):

没写 DOCTYPE 触发怪异模式
在<!DOCTYPE ...>前加<?xml version="1.0" encoding="utf-8" ?>, IE6 下会触发怪异模式
在<!DOCTYPE ...>前参加, IE7进入怪异模式
<!DOCTYPE ...>前有任何非空字符，会在IE6 下会触发怪异模式
<!DOCTYPE ...>前有 XML ，在IE7 下不会触发怪异模式，但不克不及有其他非空字符
检查document.compatMode,可以查看阅读器工作在哪个模式：值BackCompat为怪异模式，值CSS1Compat为标准模式

（3）display:inline-block 元素间有间隙

<!-- 以下的 li 元素是 display: inline; 类型的 -->
<!-- 这样写元素之间有间隙 -->
<ul>
  <li>apple</li>
  <li>banana</li>
  <li>pineapple</li>
  <li>peach</li>
  <li>orange</li>
</ul>
<!-- 换个写法解决问题-->
<ul>
  <li>apple</li><li>
  banana</li><li>
  pineapple</li><li>
  peach</li><li>
  orange</li>
</ul>

（4）IE大概显现的文档样式短暂失效问题

<head>
    <!-- meta部分 -->
    <title></title>
    <!-- 大概的script部分 -->
    <script type="text/javascript"></script>   <!-- 关键：增加一个空标签 -->
    <!-- link部分 -->
</head>