文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2024-04-02 19:55

关注

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

  一、浏览器内核

   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)样式兼容性问题

  <!--IE按Edge模式渲染-->

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

  <!--IE8910按IE7模式渲染-->

  <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...>前加入<!--keepIE7inQuirksMode-->,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部分-->

  <scripttype="text/javascript"></script><!--关键:添加一个空标签-->

  <!--link部分-->

  </head>

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

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯