css判断ie版本引用样式或css文件

条件性注释

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

示例

<!--[if IE 9]>
		<link rel="stylesheet" type="text/css" href="ie9.css"/>
<![endif]-->

<!--[if IE 9]>
		<style>
			.header-menu>li{
				color:#fff;
			}
		</style>
<![endif]-->

IE10/11以上不支持条件性注释 解决方案

https://learn.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/compatibility/hh801214(v=vs.85)?redirectedfrom=MSDN
Support for conditional comments has been removed in Internet Explorer 10 standards and quirks modes for improved interoperability and compliance with HTML5. This means that Conditional Comments are now treated as regular comments, just like in other browsers. This change can impact pages written exclusively for Windows Internet Explorer or pages that use browser sniffing to alter their behavior in Internet Explorer.

Note Most pages are unaffected by this change.

A page using Conditional Comments worked as intended in Windows Internet Explorer 9, but no longer works in Internet Explorer 10.

说来也合情合理，从IE9开始，IE开始被WEB开发人员接受，很多人将IE9后的浏览器和火狐、谷歌浏览器统称为现代浏览器，因为它们开始实现新的HTML5和CSS3统一标准。但愿望是美好的，现实却是残酷的，很多WEB开发人员在开发实践中发现，同一个CSS在IE9/10/11上显示的效果和其它浏览器渲染的效果还是不一样。也就是说，我们还是需要条件性注释。

那么，在不支持条件性注释的IE10/11上，如何实现条件性注释的效果呢？

方法一：使用IE=EmulateIE9属性指示浏览器采用IE9渲染技术

IE9是支持条件性注释的。

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">

在html网页的head里加入上面的元标记，这样IE10/11就能识别条件性注释了，我们也就可以像IE6/7/8那样编写针对性的CSS代码了。但这样做有个弊端，很显然，浏览器这样就会只能IE9的渲染模式，而不是最新的IE10/11技术。

方法二：使用媒体查询语句+

-ms-high-contrast 只有IE10/11实现了这个属性，它可以有两个值 active 、none

CSS的媒体查询语句(media query)是一种高级的CSS条件语句，它能根据一些属性和属性值计算判断CSS是否可以生效。在这里，我们要使用一个IE10/11独有的属性，它就是-ms-high-contrast

使用下面的媒体查询语句：

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
}

火狐浏览器、谷歌浏览器不能识别这个属性，所以不会执行这个查询语句里的CSS，从而实现了条件性执行的效果。

方法三：使用Javascript判断浏览器的类型

在前端开发中存在很多的浏览器，那么我们如何检测出浏览器的类型，下面我们主要总结一下。

一、userAgent

我们可以通过usrAgent来进行判断浏览器的类型。

const explorer = window.navigator.userAgent
if(explorer.indexOf("MSIE") >= 0) {
  console.log("IE")  //判断是否为IE浏览器
}else if(explorer.indexOf("Firefox") >= 0) {
  console.log("Firefox")  //是否为Firefox浏览器
}else if(explorer.indexOf("Chrome") >= 0) {
  console.log("Chrome")  //是否为Chrome浏览器
}else if(explorer.indexOf("Opera") >= 0) {
  console.log("Opera")   //是否为Opera浏览器
}else if(explorer.indexOf("Safari") >= 0) {
  console.log("Safari")  //是否为Safari浏览器
}

但是通过userAgent来判断为哪个浏览器时，不够严谨，因为userAgent是可以被修改的

二、可以通过各浏览的特征来进行判断

  if(window.ActiveXObject) {
    console.log("IE")
  }else if(document.getBoxObjectFor) {  //只有火狐有
    console.log("Firefox")
  }else if(window.MessageEvent && !document.getBoxObjectFor) {
    console.log("Chrome")
  }else if(window.opera) {
    console.log("Opera")
  }else if(window.openDatebase) {
    console.log("safair")
  }

一、IE
我们可以判断window上是否存在ActiveXObject函数来进行判断。
二、Safari浏览器
Safari浏览器存在其他浏览器中没有的一个函数，openDatabase函数，我们可以通过openDatabase函数的有无来进行判断。
三、Chrome浏览器
Chrome浏览器中存在MessageEvent函数，不过Firefox也存在。但是Firefox中不存在getBoxObjectFor函数。
四、Firefox浏览器
可以使用getBoxObjectFor来判断是否为Firefox浏览器。
五、Opera浏览器
可以使用window.Opera来判断是否为Opera浏览器。

原文链接：https://blog.csdn.net/weixin_47450807/article/details/123077816

JavaScript 包含一个名为 Navigator 的对象 ，Navigator 包含了有关访问者浏览器的信息，包括浏览器类型、版本等等 。Navigator对象里面含有两个重要的属性，appName （保存浏览器类型 ），appVersion （保存有浏览器的版本信息 ）。下面我们用代码来测试一下：

<script type="text/javascript">
    function detectBrowser() {
        var browser = navigator.appName//获取浏览器名字
        var b_version = navigator.appVersion//获取浏览器版本信息
        var version = parseFloat(b_version)//提取浏览器版本号
	​    document.write("浏览器名称是: " + browser)//浏览器名称是: Netscape
	    document.write("<br />")
	    document.write("浏览器版本是: " + version)//浏览器版本是: 5
	    
        if ((browser == "Netscape" || browser == "Microsoft Internet Explorer")
            && (version >= 4)) {
            console.log('非IE浏览器，能访问页面');
        }
        else { alert("优秀的小伙伴都选择切换其他浏览器或升级IE浏览器了哦") }
    }
​
    detectBrowser();//调用函数，判别浏览器，如果是IE低版本提示用户升级
</script>

上面例子中的 browser 变量存有浏览器的名称，比如，非IE显示"Netscape" 或者 IE显示"Microsoft Internet Explorer" ，所以只能判别是IE还是非IE,如果你是想让用户不用IE浏览器，这样也可以了。这里要注意一点，IE的版本号是有点问题的，IE4/5/6的版本号都是4.0，所以我们就可以做到：如果用户使用的是IE6或以下版本，请用户升级浏览器。
当然，如果你想判别具体是哪种浏览器，那还得利用Navigator 的对象的userAgent属性，比如：

function getBrowserType(){
  var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
  var browser='unknown';
  if (userAgent.indexOf("IE")!=-1) {//字符串含有IE字段，表明是IE浏览器
    browser="IE";
  }else if(userAgent.indexOf('Firefox')!=-1){//字符串含有Firefox字段，表明是火狐浏览器
    browser="Firefox";
  }else if(userAgent.indexOf('OPR')!=-1){//Opera
    browser="Opera";
  }else if(userAgent.indexOf('Chrome')!=-1){//Chrome
    browser="Chrome";
  }else if(userAgent.indexOf('Safari')!=-1){//Safari
    browser="Safari";
  }else if(userAgent.indexOf('Trident')!=-1){//IE内核
    browser='IE 11';
  }
  return browser;
}

// 获取IE版本
function IEVersion() {
  // 取得浏览器的userAgent字符串
  var userAgent = navigator.userAgent;
  // 判断是否为小于IE11的浏览器
  var isLessIE11 = userAgent.indexOf('compatible') > -1 && userAgent.indexOf('MSIE') > -1;
  // 判断是否为IE的Edge浏览器
  var isEdge = userAgent.indexOf('Edge') > -1 && !isLessIE11;
  // 判断是否为IE11浏览器
  var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf('rv:11.0') > -1;
  if (isLessIE11) {
    var IEReg = new RegExp('MSIE (\\d+\\.\\d+);');
    // 正则表达式匹配浏览器的userAgent字符串中MSIE后的数字部分，，这一步不可省略！！！
    IEReg.test(userAgent);
    // 取正则表达式中第一个小括号里匹配到的值
    var IEVersionNum = parseFloat(RegExp['$1']);
    if (IEVersionNum === 7) {
      // IE7
      return 7
    } else if (IEVersionNum === 8) {
      // IE8
      return 8
    } else if (IEVersionNum === 9) {
      // IE9
      return 9
    } else if (IEVersionNum === 10) {
      // IE10
      return 10
    } else {
      // IE版本<7
      return 6
    }
  } else if (isEdge) {
    // edge
    return 'edge'
  } else if (isIE11) {
    // IE11
    return 11
  } else {
    // 不是ie浏览器
    return -1
  }
}