网站导航免费论文 原创论文 论文搜索 原创论文 网学软件 学术大家 资料中心 会员中心 问题解答 原创论文 大学论文导航 设计下载 最新论文 下载排行 原创论文 论文源代码
返回网学首页
网学联系
最新论文 推荐专题 热门论文 素材专题
当前位置: 网学 > 编程文档 > 网络知识 > 正文

Web前端浏览器兼容初探

来源:http://myeducs.cn 联系QQ:点击这里给我发消息 作者: 用户投稿 来源: 网络 发布时间: 14/07/16

网学网为广大网友收集整理了,Web前端浏览器兼容初探,希望对大家有所帮助!

     前言      浏览器兼容是前端开发人员必须掌握的一个技能,但是初入前端的同学或者其他后台web开发同学往往容易选择忽略,而形成两个极端:      1. 我最开始都是使用IE6,IE6上没问题,其它浏览器坑爹(多出现与前端后端一起搞的同学,小生2年前就这种状态,鼓励人家用ie6.。。。)      2. 我要遵循标准,我只要ff就好,IE就是坑爹的玩意,我不必去理他(小生一年前的心态。。。)
      现在看来,之前的想法都是不对的,我们诚然应该追求最新的浏览器使用最新的技术,但是渐进增强,向后兼容的思想一定要有,因为就现在IE6在中国的份额也是不容小视的。抛开之前的大道理,我们说点实际的问题,哪次前端面试不问兼容性问题?哪次我们又能回答的很好?反正我就没一次说好的,知不足然后能改,我前段时间便经过整理形成这篇文章,文章有很多不足,希望各位指正、补充,后面若是能形成一篇较全面的前端兼容文章就善莫大焉了!
      为什么会有兼容问题?
      由于市场上浏览器种类众多,而不同浏览器其内核亦不尽相同,所以各个浏览器对网页的解析就有一定出入,这也是导致浏览器兼容问题出现的主要原因,我们的网页需要在主流浏览器上正常运行,就需要做好浏览器兼容。
  1. 使用Trident内核的浏览器:IE、Maxthon、TT;
  2. 使用Gecko内核的浏览器:Netcape6及以上版本、FireFox;
  3. 使用Presto内核的浏览器:Opera7及以上版本;
  4. 使用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这一关)
  1. /* CSS属性级Hack */ 
  2.  
  3. color:red; /* 所有浏览器可识别*/ 
  4.  
  5. _color:red; /* 仅IE6 识别 */ 
  6.  
  7. *color:red; /* IE6、IE7 识别 */ 
  8.  
  9. +color:red; /* IE6、IE7 识别 */ 
  10.  
  11. *+color:red; /* IE6、IE7 识别 */ 
  12.  
  13. [color:red; /* IE6、IE7 识别 */ 
  14.  
  15. color:red\9; /* IE6、IE7、IE8、IE9 识别 */ 
  16.  
  17. color:red\0; /* IE8、IE9 识别*/ 
  18.  
  19. color:red\9\0; /* 仅IE9识别 */ 
  20.  
  21. color:red \0; /* 仅IE9识别 */ 
  22.  
  23. color:red!important; /* IE6 不识别!important 有危险*/
  24.  
  25. /* CSS选择符级Hack */ 
  26.  
  27. *html #demo { color:red;} /* 仅IE6 识别 */ 
  28.  
  29. *+html #demo { color:red;} /* 仅IE7 识别 */ 
  30.  
  31. body:nth-of-type(1) #demo { color:red;} /* IE9+、FF3.5+、Chrome、Safari、Opera 可以识别 */ 
  32.  
  33. head:first-child+body #demo { color:red; } /* IE7+、FF、Chrome、Safari、Opera 可以识别 */ 
  34.  
  35. :root #demo { color:red\9; } : /* 仅IE9识别 */
  36.  
  37. /* IE条件注释Hack */ 
  38.  
  39. <!--[if IE 6]>此处内容只有IE6.0可见<![endif]-->
  40.  
  41. <!--[if IE 7]>此处内容只有IE7.0可见<![endif]-->
复制代码
  • 上一篇资讯: HTML5之Form新属性的使用
  • 网学推荐

    免费论文

    原创论文

    设为首页 | 加入收藏 | 论文首页 | 论文专题 | 设计下载 | 网学软件 | 论文模板 | 论文资源 | 程序设计 | 关于网学 | 站内搜索 | 网学留言 | 友情链接 | 资料中心
    版权所有 QQ:3710167 邮箱:3710167@qq.com 网学网 [Myeducs.cn] 您电脑的分辨率是 像素
    Copyright 2008-2015 myeducs.Cn www.myeducs.Cn All Rights Reserved 湘ICP备09003080号