IE浏览器版本检测小结

IE浏览器版本检测小结

最近在PC web前端IE兼容性方面，做了很多工作，包括解决IE兼容性的BUG、IE低版本polyfill解决方案和IE浏览器下的提示。IE兼容的问题多而杂，且IE各个版本存在的问题也不一样，总结起来的话比较费劲；但针对IE的解决，都要涉及到IE版本的检测，本文对常用方法做一些总结。

---

何时需要IE版本检测

1. IE兼容性BUG
   在IE低版本浏览器中，会有很多意想不到的BUG，大部分是样式BUG，因为IE低版本对css的一些属性的支持情况不尽相同，倘若页面中和现代浏览器用同一种css样式文件，很大概率会出现样式不一致甚至错乱的情况。而不同的IE版本，又不尽相同，所以最好的解决办法是对不同的IE版本做区分使用不同的样式文件。

2. IE低版本polyfill
   IE不同版本对H5的新特性以及js的一些API支持情况也不尽相同，比如，最近解决的placeholder属性polyfill，IE9及以下版本不支持<input>的 placeholder 属性。
   
   
   polyfill可以通过在input上覆盖浮动元素实现placeholder效果，input输入值时隐藏浮动元素。但IE10以上，可以直接使用原生的placeholder属性，不需要进行处理，这就需要进行版本检测对实现方法进行区分。

3. IE浏览器下的提示
   有些情况下，不需要去解决IE不支持的问题，可能是策略上只需要支持现代浏览器，也可能是一些高级效果没办法通过polyfill实现。这时可以简单在IE低版本浏览器打开页面时，给出提示，例如：
   

IE版本检测方法

html条件注释

对于IE兼容样式问题，常用的解决办法是针对不同的IE版本使用不同的样式文件进行处理。而针对某个IE版本的样式文件，不希望在其他版本下引入，这时使用条件注释可以很方便的进行区分。

<!-- 默认先调用css.css样式表 -->
<link rel="stylesheet" type="text/css" href="css.css" />

<!-- IE下调用1.css样式表 -->
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="1.css" />
<![endif]-->

<!-- 如果IE浏览器版本小于6,调用2.css样式表 -->
<!--[if lt IE 6]>
<link rel="stylesheet" type="text/css" href="2.css" />
<![endif]-->

条件注释语句在其它浏览器里，完全就是一堆注释，但在IE里却不会。IE会分析里面的版本号，并根据版本号确定要不要解析里面内容。
其中有一些语法：

• lte: 就是Less than or equal to的简写，也就是小于或等于的意思。
• lt: 就是Less than的简写，也就是小于的意思。
• gte: 就是Greater than or equal to的简写，也就是大于或等于的意思。
• gt: 就是Greater than的简写，也就是大于的意思。
• !: 就是不等于的意思
  根据这些语法就可以轻松区分不同IE版本了：