浏览器兼容写法

2017-03-11

还是浏览器兼容的问题

浏览器版本其实不能按照厂家来分，因为最重要的是要看浏览器的内核，主要有那么几种：IE的Trident(IE6、IE7、IE8（Trident 4.0）、IE9（Trident 5.0）、IE10（Trident 6.0）； 360安全浏览器（1.0-5.0为Trident，6.0为Trident+Webkit，7.0为Trident+Blink）猎豹极轻浏览器，360极速浏览器（7.5之前为Trident+Webkit，7.5为Trident+Blink）),早起版本与w3c有些脱节，某种意义上，IE10以下都需要考虑兼容；Gecko，Mozilla FireFox(火狐浏览器) 自家开发的内核，不过新推出的Brave,已经采用BLink/v8，不知道是不是要搞事情；Webkit(Safari内核,Chrome内核原型,开源)，目前safari和google自家安卓都在用，市场份额逐年提升，移动端和pc端的大佬。
当然在进前端开发的时候，并不是所有浏览器都需要一一兼容的，大体上可以分为IE9-和其他浏览器这么两类，部分属性需要比如getClassName需要考虑IE6~8，还有的属性比如clientWidth则需要考虑IE8（IE8的clientWidth是直接包括了双边框的）等等，css3的样式则需要考虑各浏览器的内核，这里只讨论lowIE版本和所谓的标准浏览器的js方面的判断

几个属性判断

可以考虑几个标准浏览器有而lowIE没有的属性进行判断，比如：JSON/getComputedStyle等

1	JSON in window\|\| window.getComputedStyle;

用in和 .attr的方式都可以判断成功则可以直接用标准方法，否则特殊处理

navigator.userAgent

调用大招：window.navigator.userAgent判断浏览器详细信息，该属性记录了浏览器版本、内核等非常多的信息。通过正则判断即可。

1 2	var str = window.navigator.userAgent; console.log(str);//==>'mozilla/5.0 (windows nt 10.0; wow64) applewebkit/537.36 (khtml, like gecko) chrome/58.0.3000.4 safari/537.36'

返回的信息头，说实话我也没有完全看懂，但几个关键部分，chrome/58.0.3000 safari/537.36 mozilla，就是我们想要的，当然先判断特殊的低版本浏览器

1 2	var reg = /(MSIE) ((6\|7\|8)\.\d)/; reg.test(window.navigator.userAgent);//==>true时进行IElow的特殊操作

条件注释语句判断

这是一种写在html中的浏览器判断问题，非常简单，但是判断的目的时引入正确的js脚本文件，在这里渲染和读取对网页的性能有挑战，一般会用在Bootstrap等不支持低版本IE的框架引用时

<!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]-->
<!--[if IE]> 所有的IE可识别 <![endif]-->
<!--[if IE 6]> 仅IE6可识别 <![endif]-->
<!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]-->
<!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->
<!--[if IE 7]> 仅IE7可识别 <![endif]-->
<!--[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]-->
<!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->
<!--[if IE 8]> 仅IE8可识别 <![endif]-->
<!--[if IE 9]> 仅IE9可识别 <![endif]-->

在两个条件注释之间加入满足条件时应该导入的js文件即可，这里面有几个单词需要解释下：

lt:less than 低于；
gt：greater-than 高于
gte:greater-than or equal 高于或等于