浏览器的兼容

631 阅读4分钟
浏览器兼容是
web开发人员必须掌握的一个技能,新手或后端开发的小伙伴往往容易选择忽略,碰到兼容问题不能很好的解决,接下来,让我来带大家分析一下浏览器兼容的细节。
一、为什么会有兼容问题?
由于市场上浏览器种类众多,而不同浏览器其内核亦不尽相同,所以各个浏览器对网页的解析就有一定出入,这也是导致浏览器兼容问题出现的主要原因,我们的网页需要在主流浏览器上正常运行,就需要做好浏览器兼容。
1.
使用
Trident内核的浏览器:IE、Maxthon、TT;
2.
使用
Gecko内核的浏览器:Netcape6及以上版本、FireFox;
3.
使用
Presto内核的浏览器:Opera7及以上版本;
4.
使用
Webkit内核的浏览器:Safari、Chrome。
我们通常所说的兼容性问题,主要是
IE与几个主流浏览器如firefox,google等。
​ 对浏览器兼容问题,一般分为以下几种:
​ HTML的兼容
​ Javascript兼容
​ CSS兼容
二、
HTML的兼容
​ html相关问题比较容易处理,无非是高版本浏览器用了低版本浏览器无法识别的元素,导致其不能解析,所以平时注意一点就是。特别是HTML5增加了 许多新标签。
三、
JavaScript兼容性
​ 在javascript中,各个浏览器基本语法差距不大,其兼容问题主要出现在各个浏览器的实现上,尤其对事件的支持有很大问题:
​ ① 在标准的事件绑定中绑定事件的方法函数为 addEventListener,而IE使用的是attachEvent
​ ② 标准浏览器采用事件捕获的方式对应IE的事件冒泡机制(即标准由最外元素至最内元素或者IE由最内元素到最外元素)最后标准方亦觉得IE这方面的比较合理,所以便将事件冒泡纳入了标准,这也是addEventListener第三个参数的由来,而且事件冒泡作为了默认值。
​ ③ 事件处理中非常有用的event属性获得亦不相同,标准浏览器是作为参数带入,而IE是window.event
方式获得,获得目标元素
IE为e.srcElement标准浏览器为e.target
​ ④ 然后在IE中是不能操作tr的innerHTML的
​ ⑤ 然后IE日期函数处理与其它浏览器不大一致,比如:var year= new Date().getYear();
IE中会获得当前年,但是在firefox中则会获得当前年与1900的差值。
​ ⑥ 获得DOM节点的方法有所差异,其获得子节点方法不一致。
IE:parentElement parentElement.children
Firefox:parentNode parentNode.childNodes
childNodes的下标的含义在IE和Firefox中不同,Firefox使用DOM规范,childNodes中会插入空白文本节点。一般可以通 过node.getElementsByTagName()来回避这个问题。
html中节点缺失时,IE和Firefox对parentNode的解释不同。例如:
<form> <table> <input/> </table> </form>
IE:input.parentNode的值为空节点
Firefox:input.parentNode的值为form
解决方法:
Firefox中节点没有removeNode方法,必须使用如下方法 node.parentNode.removeChild(node)
⑦ 关于AJAX的实现上亦有所不同;
​ 就javascript来说,各大浏览器之间的差异还是不少的,但是具体我变得这里都不大关注了,因为我们开发过程中一般都会使用类库,若是不使用,都会自己积累形成一个类库,所以就js而言,兼容性问题基本解决了。
四、
CSS兼容
​ 每个浏览器的默认值是不一样的,所以首先需要同一所有默认值,例:body标签在每个浏览器中的外边距不一致,需要设置padding:0;margin:0;,默认字体不一致,可以通过设置font-family
属性来保持一致,还有默认的行高、图片以及表单元素的默认边框、图片下方的间隙、
IE中的z-index属性等。
​ 其实,css的兼容不难解决,譬如,有人写好了一份公共的css文件,我们只需要在代码之初将其引入即可。总之,当我们碰到css的兼容问题时,首先要做的是,深入了解学习产生兼容性问题的属性在各个浏览器的不同体现,相信接下来就可以利用所掌握的知识很好进行解决了 。