重构之处理IE浏览器兼容问题，伪类根据元素在父元素的子元素列表中的索引来选择元素。

情景 1 ：判断是否为 IE 浏览器

问题描述：谷歌浏览器使用 v-model 绑定控制 input 框高的值能够实时反应并生效，而到了 IE 浏览器上就没有同步的效果了，其中一边改了，另一边的话只有点击了输入框使其聚焦后才会发生改动后的改变效果，所以就打算通过判定一下是否为 IE 浏览器后并通过代码控制使其进行自动聚焦，也可达到类似的效果，下面则就是如何判断浏览器的知识点：

知识点 :

navigator.userAgent.indexOf 来判断浏览器类型

$(document).ready(function(){
	var ua = navigator.userAgent;
	if(ua.indexOf("Android")>0 || ua.indexOf("iPhone")>0 || ua.indexOf("iPad")>0) { //移动端
		location.href="${ctx}/live/wap";
	} else { // pc端
		location.href="${ctx}/live/index";
	}
});
<script language="JavaScript">
  function getOs() {
    var OsObject = "";
    if (navigator.userAgent.indexOf("MSIE") > 0) {
      return "MSIE";
    }
    if (isFirefox = navigator.userAgent.indexOf("Firefox") > 0) {
      return "Firefox";
    }
    if (isSafari = navigator.userAgent.indexOf("Safari") > 0) {
      return "Safari";
    }
    if (isCamino = navigator.userAgent.indexOf("Camino") > 0) {
      return "Camino";
    }
    if (isMozilla = navigator.userAgent.indexOf("Gecko/") > 0) {
      return "Gecko";
    }
  }
  alert("您的浏览器类型为:" + getOs());
</script>
 
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
  http_request = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
  http_request = new ActiveXObject("Microsoft.XMLHTTP");
}

var userAgent = navigator.userAgent;  // 取得浏览器的 userAgent 字符串
console.log(userAgent)
/* 是否是火狐  ，火狐内核 Gecko */
var isFirefox = navigator.userAgent.indexOf('Firefox') > -1 
console.log('火狐' + isFirefox) // 返回 true  则是 ，false  则不是
/* 是否是 WebKit 内核 */
var isWebKit = navigator.userAgent.indexOf('WebKit') > -1
console.log('谷歌内核' + isWebKit) // 返回 true  则是，false  则不是
/* 是否是 谷歌 */
var isChrome = navigator.userAgent.indexOf('Chrome') > -1
console.log('谷歌' + isChrome) // 返回 true  则是 ，false  则不是
/* 是否是 opera ， opera 内核 Presto */
var isOpera = navigator.userAgent.indexOf('Opera') > -1
console.log('Opera' + isOpera) // 返回 true  则是 ，false  则不是
/* 是否是 IE 内核 */
var isTrident = navigator.userAgent.indexOf('Trident') > -1
console.log('IE内核' + isTrident) // 返回 true  则是 ，false  则不是
/* 判断是否 IE 浏览器 */
var isIE = navigator.userAgent.indexOf("compatible") > -1 && navigator.userAgent.indexOf("MSIE") > -1 && !isOpera
console.log('IE ' + isIE)
 
// 因为 IE10 - IE11 的版本问题，不再支持 document.all 判断，所以 IE 判断函数要重新写
var isIeL = !!window.ActiveXObject || "ActiveXObject" in window
console.log('IELLQ ' + isIeL) // 判断是否IE浏览器
/* 判断是否 IE9 ; 如果是其他 IE 版本，则 MSIE 7.0   MSIE 8.0 */
var isIE9 = navigator.userAgent.indexOf("MSIE 9.0") > 0
console.log('IE999' + isIE9)
 
// 判断是否为移动端
var browser = {
  versions: function () {
    var u = navigator.userAgent;
    return {
      trident: u.indexOf('Trident') > -1,   // IE 内核
      presto: u.indexOf('Presto') > -1,     // opera 内核
      webKit: u.indexOf('AppleWebKit') > -1, // 苹果、谷歌内核
      gecko: u.indexOf('Firefox') > -1,     // 火狐内核 Gecko
      mobile: !!u.match(/AppleWebKit.*Mobile.*/), // 是否为 移动终端
      ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), // ios
      android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, // android
      iPhone: u.indexOf('iPhone') > -1,     // iPhone
      iPad: u.indexOf('iPad') > -1,         // iPad
      webApp: u.indexOf('Safari') > -1      // Safari
    };
  }()
}
var isPhone = browser.versions.mobile || browser.versions.ios || browser.versions.android || browser.versions.iPhone || browser.versions.iPad
console.log("是否为移动端" + isPhone)

前端浏览器 navigator.userAgent 操作

// JS 判断浏览器是否是 IE9 以下，处理可能遇到的兼容性问题
if (navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion.split(";")[1].replace(/[ ]/g, "").replace("MSIE", "")) < 9) {
  console.log("您的浏览器版本过低, 请使用 IE9 及以上版本");
}

情景 2 ：” TypeError : 对象不支持 “ includes ” 属性或方法 “

问题描述：我在利用 Vue 脚手架 vue-cli4 进行开发时，用了 ElementUI 这个组件库里的 InfiniteScroll 无限滚动组件，但是我运行项目在谷歌里跑的好好的，用 IE 浏览器再打开编译好的页面时，就遇到了兼容性问题：组件功能实现不了，控制台报错为：

[ Vue warn ] : Error in directive infinite-scroll inserted hook :

” TypeError : 对象不支持 “ includes ” 属性或方法 ” found in —>

而且最神奇的是我的项目中压根就还没有用到 includes 这个方法呀，

我在全局搜索 includes 也都没有找到，然后去对应的文件（ HomePage.vue 文件，index.vue 文件，App.vue 文件里进行局部搜索 includes 也都没有找到 includes ）

这报错好神奇啊，压根就没有还能报错（可能是Element UI 组件库的底层用到了吧）

后来百度查找，通过下面这个方法安转一个插件后解决：
第一步、安装 babel-polyfill 插件

1.在项目中安装 babel-polyfill ， $ npm install –save babel-polyfill

2.在 index.html 里面加上：<meta http-equiv=”X-UA-Compatible” content=”IE=edge” />

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <title>Document</title>
</head>
 
<body>
  <div id="app"></div>
</body>
 
</html>

3.在 main.js 里面引入 import ‘babel-polyfill’

webpack.base.conf.js 下修改配置项： ( 老版本配置了，可忽略此步骤 )

module.exports = {
context: path.resolve(__dirname, ‘../’),
entry: {
app: [“babel-polyfill”, “./src/main.js”]
}

…..}

【这一步我没有配置，可能是因为我在 vue.config.js 内配置过了，反正当初也是拿的别的项目模板复制粘贴上去的，最后再运行 IE ，确实不再报错了，好神奇】
5.重新运行程序重新运行程序重新运行程序重要的事情说三遍，一定要重新运行

问题描述：Vue IE 报错 SCRIPT5022 : SecurityError sockjs.js (1683,3)

1、找到 / node_modules / sockjs-client / dist / sockjs.js

2、找到代码的 1605 行

// request 请求拦截器
axios.interceptors.request.use(
  (config) => {
    // 从 session 中拿到 userId, 如果不存在, 说明没有登录, 就去登录页
    let userToken = window.sessionStorage.getItem('userId')
    if (userToken && userToken != null && userToken != 'null') {
      config.headers['userId'] = userToken
      config.headers['If-Modified-Since'] = '0'
      config.headers['Cache-Control'] = 'no-cache' // 清除 IE 接口缓存问题
    } else {
      window.sessionStorage.clear() // 删除登录的所有状态
      if (process.env.NODE_ENV === 'development') {
        window.location.href = `${process.env.VUE_APP_BASE_API}/login`
      } else {
        window.location.href = `${process.env.VUE_APP_BASE_API}/login`
      }
    }
    config.headers["Content-Type"] = "application/json";
    console.log(config, "config");
    // config.timeout = 10000
    return config;
  },
  (error) => {
    // 请求失败拦截
    console.log("request-error:" + error); // for debug
    return Promise.error(error);
  }
);

IE 浏览器的缓存问题非常的严重，网上也没有一篇完整的解决思路和文档，特此写下解决方法，供自己以后查看。。。

问题描述：IE 浏览器 get 会自动请求来自缓存的问题

项目在 IE 浏览器内的 get 请求会在 “ 已接收 ” 下提示显示（来自缓存），

并且右边的标头下的请求标头内容看着很明显不对劲

正文里的响应正文内容也不对

所以最后讨论推导得出的就是因为 get 请求在 IE 里面走了缓存

解决方案：（简单）就直接在 get 请求里多携带一个时间戳参数就 OK 啦。