浏览器和兼容问题

2023年11月18日 208次阅读 来源: Suzy323

一、浏览器内核

参考文章：浏览器引擎（内核）引见
 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、百度、天下之窗Trident
chrome、operachromium或称Blink
360、猎豹、2345浏览器IE+chromium
FirefoxGecko
SafariWebkit
搜狗、游览、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浏览器、枫树浏览器、快快浏览器、百度浏览器、阿云浏览器（后期版本）、太阳花浏览器，个中最奇葩的是傲游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）款式兼容性题目
<!– IE 按 Edge 形式衬着 –>
<meta http-equiv=”X-UA-Compatible” content=”IE=Edge” />
<!– IE 8 9 10 按 IE7 形式衬着 –>
<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 …>前到场<!– keep IE7 in Quirks Mode –>, 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>

参考文章：前端兼容性题目总结

    原文作者：Suzy323
    原文地址: https://segmentfault.com/a/1190000016008519
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞