搜索
首页web前端html教程浏览器内核以及浏览器兼容的问题分析

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

Aug 15, 2018 pm 02:17 PM
csshtmljavascript

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

一、浏览器内核

 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 元素间有间隙

<!-- 以下的 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:比较Web技术HTML与CSS和JavaScript:比较Web技术Apr 23, 2025 am 12:05 AM

HTML、CSS和JavaScript是构建现代网页的核心技术:1.HTML定义网页结构,2.CSS负责网页外观,3.JavaScript提供网页动态和交互性,它们共同作用,打造出用户体验良好的网站。

HTML作为标记语言:其功能和目的HTML作为标记语言:其功能和目的Apr 22, 2025 am 12:02 AM

HTML的功能是定义网页的结构和内容,其目的在于提供一种标准化的方式来展示信息。1)HTML通过标签和属性组织网页的各个部分,如标题和段落。2)它支持内容与表现分离,提升维护效率。3)HTML具有可扩展性,允许自定义标签增强SEO。

HTML,CSS和JavaScript的未来:网络开发趋势HTML,CSS和JavaScript的未来:网络开发趋势Apr 19, 2025 am 12:02 AM

HTML的未来趋势是语义化和Web组件,CSS的未来趋势是CSS-in-JS和CSSHoudini,JavaScript的未来趋势是WebAssembly和Serverless。1.HTML的语义化提高可访问性和SEO效果,Web组件提升开发效率但需注意浏览器兼容性。2.CSS-in-JS增强样式管理灵活性但可能增大文件体积,CSSHoudini允许直接操作CSS渲染。3.WebAssembly优化浏览器应用性能但学习曲线陡,Serverless简化开发但需优化冷启动问题。

HTML:结构,CSS:样式,JavaScript:行为HTML:结构,CSS:样式,JavaScript:行为Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web开发中的作用分别是:1.HTML定义网页结构,2.CSS控制网页样式,3.JavaScript添加动态行为。它们共同构建了现代网站的框架、美观和交互性。

HTML的未来:网络设计的发展和趋势HTML的未来:网络设计的发展和趋势Apr 17, 2025 am 12:12 AM

HTML的未来充满了无限可能。1)新功能和标准将包括更多的语义化标签和WebComponents的普及。2)网页设计趋势将继续向响应式和无障碍设计发展。3)性能优化将通过响应式图片加载和延迟加载技术提升用户体验。

HTML与CSS vs. JavaScript:比较概述HTML与CSS vs. JavaScript:比较概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在网页开发中的角色分别是:HTML负责内容结构,CSS负责样式,JavaScript负责动态行为。1.HTML通过标签定义网页结构和内容,确保语义化。2.CSS通过选择器和属性控制网页样式,使其美观易读。3.JavaScript通过脚本控制网页行为,实现动态和交互功能。

HTML:是编程语言还是其他?HTML:是编程语言还是其他?Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1)htmlStructures andFormatSwebContentusingtags.2)itworkswithcsssforstylingandjavascript for Interactivity,增强WebevebDevelopment。

HTML:建立网页的结构HTML:建立网页的结构Apr 14, 2025 am 12:14 AM

HTML是构建网页结构的基石。1.HTML定义内容结构和语义,使用、、等标签。2.提供语义化标记,如、、等,提升SEO效果。3.通过标签实现用户交互,需注意表单验证。4.使用、等高级元素结合JavaScript实现动态效果。5.常见错误包括标签未闭合和属性值未加引号,需使用验证工具。6.优化策略包括减少HTTP请求、压缩HTML、使用语义化标签等。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )专业的PHP集成开发工具

螳螂BT

螳螂BT

Mantis是一个易于部署的基于Web的缺陷跟踪工具,用于帮助产品缺陷跟踪。它需要PHP、MySQL和一个Web服务器。请查看我们的演示和托管服务。

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

MinGW - 适用于 Windows 的极简 GNU

MinGW - 适用于 Windows 的极简 GNU

这个项目正在迁移到osdn.net/projects/mingw的过程中,你可以继续在那里关注我们。MinGW:GNU编译器集合(GCC)的本地Windows移植版本,可自由分发的导入库和用于构建本地Windows应用程序的头文件;包括对MSVC运行时的扩展,以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。

WebStorm Mac版

WebStorm Mac版

好用的JavaScript开发工具