导读:这些天都在调一个系统的样式布局,之前没有想太多了,初次试水,结果好不容易全都调好了之后,结果发现在IE上不兼容。也就是出现了传说中的兼容性问题,那么,怎么去解决这个问题呢?我认为要提出解决方案,就得先找出问题原因。
一、定义
浏览器兼容性问题:又被称为网页兼容性或网站兼容性问题,指网页在各种浏览器上的显示效果可能不一致而产生浏览器和网页间的兼容问题。
常见表现:网页元素混乱,错位。
结合到自己的经历,简单说来,浏览器兼容问题,就是在一个浏览器上能正常显示的页面,换到另外一个浏览器之后,就达不到自己想要的效果。出现样式没有引入,位置错乱等现象。
二、原因
不同浏览器使用内核及所支持的HTML等网页语言标准不同;以及用户客户端的环境不同(如分辨率不同)造成的显示效果不能达到理想效果。
2.1,浏览器内核
浏览器内核:浏览器最重要或者说核心的部分是“Rendering Engine”,可大概译为“渲染引擎”,不过我们一般习惯将之称为“浏览器内核”。负责对网页语法的解释(如标准通用标记语言下的一个应用HTML、JavaScript)并渲染(显示)网页。 所以,通常所谓的浏览器内核也就是浏览器所采用的渲染引擎,渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释也有不同,因此同一网页在不同的内核的浏览器里的渲染(显示)效果也可能不同,这也是网页编写者需要在不同内核的浏览器中测试网页显示效果的原因。
2.1.1,分类
1,渲染引擎
用来显示请求的内容,如果请求内容为html,那么负责解析html、及css并将解释后的结果显示出来。还可以解析xml文件。
附:工作原理
渲染主流程(The main flow)
渲染引擎首先通过网络获得所请求文档的内容,通常以8K分块的方式完成。
下面是渲染引擎在取得内容之后的基本流程:
解析html以构建dom树 -> 构建render树 -> 布局render树 -> 绘制render树
渲染引擎开始解析html,并将标签转化为内容树中的dom节点。接着,它解析外部CSS文件及style标签中的样式信息。这些样式信息以及html中的可见性指令将被用来构建另一棵树——render树。
Render树由一些包含有颜色和大小等属性的矩形组成,它们将被按照正确的顺序显示到屏幕上。
Render树构建好了之后,将会执行布局过程,它将确定每个节点在屏幕上的确切坐标。再下一步就是绘制,即遍历render树,并使用UI后端层绘制每个节点。
2,js引擎
用来解释执行js代码。
说明:从浏览器渲染引擎的工作原理来看,之所以会导致浏览器的兼容问题,我觉得在第一步就已经出现问题了,每个浏览器内核都有自己的渲染解析方式。因为解析的方式不同,所以后面的构建、布局和绘制自然而然的就会出现误差。
2.2,常见浏览器内核
1,Trident(IE内核):该内核程序在1997年的IE4中首次被采用,是微软在Mosaic代码的基础之上修改而来的,并沿用到IE11,也被普遍称作”IE内核”。Trident实际上是一款开放的内核,其接口内核设计的相当成熟,因此才有许多采用IE内核而非IE的浏览器(壳浏览器)涌现。
2,Gecko(Firefox内核):Netscape6开始采用的内核,后来的Mozilla FireFox(火狐浏览器) 也采用了该内核,Gecko的特点是代码完全公开,因此,其可开发程度很高,全世界的程序员都可以为其编写代码,增加功能。
3,Webkit(Safari内核,Chrome内核原型,开源):它是苹果公司自己的内核,也是苹果的Safari浏览器使用的内核。 Webkit引擎包含WebCore排版引擎及JavaScriptCore解析引擎,均是从KDE的KHTML及KJS引擎衍生而来,它们都是自由软件,在GPL条约下授权,同时支持BSD系统的开发。所以Webkit也是自由软件,同时开放源代码。在安全方面不受IE、Firefox的制约,所以Safari浏览器在国内还是很安全的。
4,Blink是一个由Google和Opera Software开发的浏览器排版引擎,这一渲染引擎是开源引擎WebKit中WebCore组件的一个分支,并且在Chrome(28及往后版本)、Opera(15及往后版本)和Yandex浏览器中使用。
三、解决办法
我个人将浏览器兼容性问题的解决分为这么几个步骤:(有具体问题的具体解决办法,运用搜索引擎去吧)
1,开发前
考虑用户的使用习惯,如果用户自身对于浏览器有特殊要求,那么,在开发的过程中,肯定要注意兼容用户的指定浏览器。但这只是小范围的用户,如果开发的产品应用范围广泛,那么这显然不是一个有效的解决方案。
在开发前,还应该思考,在哪些地方可能会出现兼容性问题,就是得有兼容性问题的意识。
2,开发中
将开发产品在多钟渲染引擎上进行测试,以便达到在最后的成品中,竟可能少的出现兼容性问题。
3,开发后
浏览器的内核在不断的发展创新,那么为了程序的兼容性问题,就必须与时俱进的进行更新维护。
我所遇到的兼容性的解决办法:1,在写样式和代码的时候,就进行兼容性处理,考虑到每种浏览器的解读方式。2,设置浏览器的兼容性模式。
四、思考感受
不管怎么样的去解决兼容性问题,但兼容性问题一直都存在。我觉得究其根本,还是治标不治本。如果,能有一个行之有效的公共标准,将浏览器的渲染方式统一,将其对于HTML文本的解读方式统一,那么就能从根本上去解决这个兼容性问题了。
有点疑惑,现在明明有W3C的标准,为什么还是会搞出各种各样的问题。如果标准已经不能适应发展了,那就修改标准吧!(突然想到了英语学习)
注:本篇博客借鉴了很多知识,只是一个知识性的理解。