浏览器内核及兼容的问题实例分析

发布时间：2022-03-23 11:03:20 作者：iii
来源：亿速云阅读：445

这篇文章主要介绍了浏览器内核及兼容的问题实例分析的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇浏览器内核及兼容的问题实例分析文章都会有所收获，下面我们一起来看看吧。

　　一、浏览器内核

　　&emsp;RenderingEngine，中文翻译过来名称很多，排版引擎、解释引擎、渲染引擎，现在流行称为浏览器内核。用来渲染网页内容的，将网页的内容和排版代码转换为可视的页面，一个浏览器可能不止有一个内核。

　　1、排版引擎

　　（1）Trident（Windows）360IE

　　（2）Gecko（跨平台）MozillaFirefox、MozillaSeaMonkey

　　（3）KHTML（Linux）Konqueror

　　（4）WebKit（跨平台）AppleSafari、Symbian系统浏览器

　　（5）Chromium（跨平台）Chromium、GoogleChrome、SRWareIron、ComodoDragon

　　（6）Presto（跨平台）Opera

　　浏览器内核

　　IE、百度、世界之窗 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应用在MozillaFirefox1.0-3.0，TraceMonkey应用在MozillaFirefox3.5-3.6版本，JaegerMonkey应用在MozillaFirefox4.0及后续的版本。

　　（3）V8

　　应用于Chrome、傲游3。

　　（4）Nitro

　　应用于Safari4及后续的版本。

　　（5）LinearA/LinearB/Futhark/Carakan

　　LinearA应用于Opera4.0-6.1版本，LinearB应用于Opera7.0～9.2版本，Futhark应用于Opera9.5-10.2版本，Carakan应用于Opera10.5及后续的版本。

　　（6）KJS

　　KHTML对应的JavaScript引擎。

　　3、单双核引擎

　　（1）Trident/Gecko双核浏览器

　　（2）Trident/WebKit双核浏览器

　　现在国内最主流的“双核”浏览器基本都是这个架构，360极速浏览器、世界之窗浏览器极速版、傲游3搜狗浏览器3、QQ浏览器、枫树浏览器、快快浏览器、百度浏览器、阿云浏览器（后期版本）、太阳花浏览器，其中最奇葩的是傲游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）CSSHack兼容性属性设置

　　2、html兼容

　　HTML篇

　　（1）样式兼容性问题

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

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

　　（2）怪异模式

　　怪异模式是没有遵守W3C规范的一种兼容模式，其中的width是包括contentWidth,左右padding,左右border在内的全部范围(height也一样)，类似于box-sizing:border-box;，而且table的font-size不能从父元素继承。以下情况会触发浏览器怪异模式(QuirksMode):

　　没写DOCTYPE触发怪异模式

　　在<!DOCTYPE...>前加<?xmlversion="1.0"encoding="utf-8"?>,IE6下会触发怪异模式

在<!DOCTYPE...>前加入,IE7进入怪异模式

　　<!DOCTYPE...>前有任何非空字符，会在IE6下会触发怪异模式

　　<!DOCTYPE...>前有XML，在IE7下不会触发怪异模式，但不能有其他非空字符

　　检查document.compatMode,可以查看浏览器工作在哪个模式：值BackCompat为怪异模式，值CSS1Compat为标准模式

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

　　<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>

<scripttype="text/javascript"></script>

　　</head>

关于“浏览器内核及兼容的问题实例分析”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“浏览器内核及兼容的问题实例分析”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注亿速云行业资讯频道。

浏览器内核及兼容的问题实例分析

相关阅读