浏览器和兼容问题

EdwardUp 发布于2019-08-02 11:16 / 1323人阅读

一、浏览器内核

参考文章：浏览器引擎（内核）介绍
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、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浏览器、枫树浏览器、快快浏览器、百度浏览器、阿云浏览器（后期版本）、太阳花浏览器，其中最奇葩的是傲游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）样式兼容性问题

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

没写 DOCTYPE 触发怪异模式
在前加, IE6 下会触发怪异模式
在前加入, IE7进入怪异模式
前有任何非空字符，会在IE6 下会触发怪异模式
前有 XML ，在IE7 下不会触发怪异模式，但不能有其他非空字符
检查document.compatMode,可以查看浏览器工作在哪个模式：值BackCompat为怪异模式，值CSS1Compat为标准模式

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




  apple
  banana
  pineapple
  peach
  orange



  apple

  banana

  pineapple

  peach

  orange

（4）IE可能出现的文档样式短暂失效问题

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

GPU云服务器云服务器兼容问题 js兼容浏览器兼容兼容性问题 Js的兼容问题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/52881.html

转载：浏览器常见兼容问题以及解决办法

摘要：浏览器兼容问题四行内属性标签，设置后采用布局，又有横行的的情况，间距问题症状里的间距比超过设置的间距碰到几率解决方案在后面加入备注行内属性标签，为了设置宽高，我们需要设置除了标签比较特殊。 (1)浏览器兼容问题一：不同浏览器的标签默认的外补丁和内补丁不同问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。碰到频率:100%解决方案：CSS里 *...

AaronYuan 2019-08-29 12:38 评论0 收藏0
转载：浏览器常见兼容问题以及解决办法

摘要：浏览器兼容问题四行内属性标签，设置后采用布局，又有横行的的情况，间距问题症状里的间距比超过设置的间距碰到几率解决方案在后面加入备注行内属性标签，为了设置宽高，我们需要设置除了标签比较特殊。 (1)浏览器兼容问题一：不同浏览器的标签默认的外补丁和内补丁不同问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。碰到频率:100%解决方案：CSS里 *...

aboutU 2019-08-20 16:40 评论0 收藏0
转载：浏览器常见兼容问题以及解决办法

摘要：浏览器兼容问题四行内属性标签，设置后采用布局，又有横行的的情况，间距问题症状里的间距比超过设置的间距碰到几率解决方案在后面加入备注行内属性标签，为了设置宽高，我们需要设置除了标签比较特殊。 (1)浏览器兼容问题一：不同浏览器的标签默认的外补丁和内补丁不同问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。碰到频率:100%解决方案：CSS里 *...

617035918 2019-08-01 16:51 评论0 收藏0
浏览器兼容（CSS部分）

摘要：对浏览器兼容问题，一般分，，兼容，兼容。特别是增加了许多新标签，低版本浏览器会存在不兼容的情况。出现这个问题的原因是之前的浏览器都会给标签一个最小默认的行高的高度。 **我所说的兼容性问题，主要是说IE与几个主流浏览器如firefox，google等。而对IE浏览器来说，IE7又是个跨度，因为之前的版本更新甚慢，bug甚多。从IE8开始，IE浏览器渐渐遵循标准，到IE9后由于大家都一致...

gityuan 2019-08-29 16:05 评论0 收藏0
DIV+CSS IE6/IE7/IE8/FF兼容问题汇总

摘要：下兼容问题，这个最好处理，转化成兼容就可以。暂时还没找到专用的兼容。高度不适应高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用或时。只是目前并不支持。以上都是写中的一些兼容，建议遵循 1.IE8下兼容问题，这个最好处理，转化成ie7兼容就可以。在头部加如下一段代码，然后只要在IE7下兼容了，IE8下面也就兼容了 2.flaot浮动造成IE6下面...

silvertheo 2019-08-28 18:06 评论0 收藏0
web前端关于浏览器兼容的一些知识和问题解决

摘要：浏览器兼容产生的原因因为不同浏览器使用内核及所支持的等网页语言标准不同。很早以前搜索引擎优化百度百度专门给技术人员提供优化方案，是一本白皮书。被抓取的网页被称之为网页快照。 showImg(https://segmentfault.com/img/bVY9Mu?w=383&h=194); 浏览器兼容为什么产生浏览器兼容，浏览器兼容问题什么是浏览器兼容；所谓的浏览器兼容性问题，是指...

daydream 2019-08-21 17:46 评论0 收藏0