网学网为广大网友收集整理了,Web前端浏览器兼容初探,希望对大家有所帮助!
前言 浏览器兼容是前端开发人员必须掌握的一个技能,但是初入前端的同学或者其他后台web开发同学往往容易选择忽略,而形成两个极端: 1. 我最开始都是使用IE6,IE6上没问题,其它浏览器坑爹(多出现与前端后端一起搞的同学,小生2年前就这种状态,鼓励人家用ie6.。。。) 2. 我要遵循标准,我只要ff就好,IE就是坑爹的玩意,我不必去理他(小生一年前的心态。。。)
现在看来,之前的想法都是不对的,我们诚然应该追求最新的浏览器使用最新的技术,但是渐进增强,向后兼容的思想一定要有,因为就现在IE6在中国的份额也是不容小视的。抛开之前的大道理,我们说点实际的问题,哪次前端面试不问兼容性问题?哪次我们又能回答的很好?反正我就没一次说好的,知不足然后能改,我前段时间便经过整理形成这篇文章,
文章有很多不足,希望各位指正、补充,后面若是能形成一篇较全面的前端兼容文章就善莫大焉了! 为什么会有兼容问题? 由于市场上浏览器种类众多,而不同浏览器其内核亦不尽相同,所以各个浏览器对网页的解析就有一定出入,这也是导致浏览器兼容问题出现的主要原因,我们的网页需要在主流浏览器上正常运行,就需要做好浏览器兼容。
- 使用Trident内核的浏览器:IE、Maxthon、TT;
- 使用Gecko内核的浏览器:Netcape6及以上版本、FireFox;
- 使用Presto内核的浏览器:Opera7及以上版本;
- 使用Webkit内核的浏览器:Safari、Chrome。
复制代码 而我现在所说的兼容性问题,主要是说IE与几个主流浏览器如firefox,google等。
而对IE浏览器来说,IE7又是个跨度,因为之前的版本更新甚慢,bug甚多。从IE8开始,IE浏览器渐渐遵循标准,到IE9后由于大家都一致认为标准很重要,可以说在兼容性上比较好了,但是在中国来说,由于xp的占有率问题,使用IE7以下的用户仍然很多,所以我们不得不考虑低版本浏览器的兼容。 对浏览器兼容问题,我一般是这样分类的,HTML,Javascript兼容,CSS兼容。 其中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兼容 因为之前对css的理解不够深入,也没有经过系统的学习,所以一度认为css是前端最难的东西,但真的学习后,才发现css真的很难。。。有很多东西啊!!! 我觉得最让人头疼的问题还是CSS问题,因为一点点布局上的bug,可能导致整个页面的错位,在用户看来这是极不专业的。 现在我就简要说说我对CSS兼容问题的认识: 先说点Hack的知识(真正的高手是不用Hack的,但要成为高手必须通过Hack这一关)
- /* CSS属性级Hack */
-
- color:red; /* 所有浏览器可识别*/
-
- _color:red; /* 仅IE6 识别 */
-
- *color:red; /* IE6、IE7 识别 */
-
- +color:red; /* IE6、IE7 识别 */
-
- *+color:red; /* IE6、IE7 识别 */
-
- [color:red; /* IE6、IE7 识别 */
-
- color:red\9; /* IE6、IE7、IE8、IE9 识别 */
-
- color:red\0; /* IE8、IE9 识别*/
-
- color:red\9\0; /* 仅IE9识别 */
-
- color:red \0; /* 仅IE9识别 */
-
- color:red!important; /* IE6 不识别!important 有危险*/
-
- /* CSS选择符级Hack */
-
- *html #demo { color:red;} /* 仅IE6 识别 */
-
- *+html #demo { color:red;} /* 仅IE7 识别 */
-
- body:nth-of-type(1) #demo { color:red;} /* IE9+、FF3.5+、Chrome、Safari、Opera 可以识别 */
-
- head:first-child+body #demo { color:red; } /* IE7+、FF、Chrome、Safari、Opera 可以识别 */
-
- :root #demo { color:red\9; } : /* 仅IE9识别 */
-
- /* IE条件注释Hack */
-
- <!--[if IE 6]>此处内容只有IE6.0可见<![endif]-->
-
- <!--[if IE 7]>此处内容只有IE7.0可见<![endif]-->
复制代码