• 技术文章 >web前端 >html教程

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

    不言不言2018-08-15 14:17:06原创1073

    本篇文章给大家带来的内容是关于浏览器内核以及浏览器兼容的问题分析,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

    一、浏览器内核

     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>

    相关推荐:

    浏览器内核信息整理

    浏览器内核 网址分解 web服务器

    js判断浏览器版本以及浏览器内核的方法_javascript技巧

    以上就是浏览器内核以及浏览器兼容的问题分析的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:html css javascript
    上一篇:在html页面的表单选项中如何能有多选功能?(示例) 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • 如何考评一名前端工程师?_html/css_WEB-ITnose• 为什么是这样的?_html/css_WEB-ITnose• 引入外部CSS的两种方式及区别_html/css_WEB-ITnose• 初识CSS_html/css_WEB-ITnose• 糟糕的css用法 1_html/css_WEB-ITnose
    1/1

    PHP中文网