js判断ie版本及是否是IE环境

有时候因为开发需要，我们的项目需要针对ie浏览器做单独的适配，这是我们就需要用到一些比较特殊的手段。这种情况我们首先既要保证正常浏览器（如谷歌、火狐、360、QQ等等）样式又要保证ie浏览器的样式，所以大多时候采用的解决方案是编写两套样式，这里我们简要举例说明一下一般的解决方案：

1、项目方案–引入两套css

在ie9以下浏览器环境里面，可以识别一个css判断代码，引用这段代码就意味着所引入的样式只在ie9以下的环境中生效，这样的话就可以让我们做到对ie9以下的版本做两套代码的适配：

  <script src="js/jquery.min.js"></script>
 <!--[if IE 8]>
  <script type="text/javascript" src="js/h5js.js" ></script>
  <script type="text/javascript" src="js/jquery.min.l.js" ></script>
  <![endif]-->

从上面的代码可以简单了解到，我们在ie8的环境里面单独引入了h5.js和jquery.min.l.js，当然这里引入其他你自己针对ie8浏览器单独做兼容的样式文件也是可以的。（这里h5js是对html语义化标签的一个兼容，有兴趣的朋友可以私信我发）

2、css样式后缀

一般比较通用的是在css样式后面加上ie特定版本才会识别的后缀，加上之后相当于此样式只会在ie的特定版本才会生效，也就是说我们写两套样式，一套是普通浏览器生效的，另一套是ie特定版本生效的：

		  background-color:#FF0000;  /* 红色 - 一般浏览器*/

          background-color:#FFFF00\9;  /* 黄色 - IE11*/

          background-color:#0000FF\0;  /* 蓝色 - IE8、IE9*/

但是很明显，这种方案解决不了某些特殊情况。这时候就可以用另外一种更完美的方案

3、js判断浏览器环境添加样式

因为ie浏览器现在ie9及以上是使用的和谷歌一样的webkit内核，所以ie9及以上所表现的样式基本上可以和谷歌浏览器一致，但是在ie9一下还是以前的ie内核，其下版本不兼容css3的所有样式，且还有一系列兼容问题（这里就不一一说明）。这里为了完美适配ie9以下版本，我推荐使用js来适配，具体方案如下：

（1）封装判断ie浏览器及其版本的公共函数

/**
 * 判断ie浏览器版本
 * */
function IEVersion() {
	var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
	var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器
	var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判断是否IE的Edge浏览器
	var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;
	if(isIE) {
		var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
		reIE.test(userAgent);
		var fIEVersion = parseFloat(RegExp["$1"]);
		console.log('ie版本：', fIEVersion);
		if(fIEVersion == 7) {
			return 7;
		} else if(fIEVersion == 8) {
			return 8;
		} else if(fIEVersion == 9) {
			return 9;
		} else if(fIEVersion == 10) {
			return 10;
		} else {
			return 6;//IE版本<=7
		}
	} else if(isEdge) {
		console.log('isEdge!');
		return 12;//edge
	} else if(isIE11) {
		console.log('isIE11!');
		return 11; //IE11
	}else{
		return 13;//不是ie浏览器
	}
}

（2）需要做ie兼容时，调用该函数添加适配样式

//ie 样式适配
  if (IEVersion() > 10 && IEVersion() < 13) {
    $('main .main-cont .main-2 .main-2-ban-box .swiper-slide .main-2-ban-desc').css({marginBottom: 0});
  }
  if (IEVersion() < 9) {
    $('main .main-cont .main-2 .main-2-ban-box .swiper-wrapper').css({marginLeft: '15px'});
  }

以上便是我推荐的几种方案，欢迎小伙伴们阅读，希望能帮到你们！