問題1. babel-polyfill

問題背景

IE11 不支持promise

解決方法

需要將promise轉換為瀏覽器可識別的ES5語法

// 1.安裝babel-polyfill
npm install --save-dev babel-polyfill
// 2.在main.js中引入babel-polyfill
import 'babel-polyfill' 
// 3.或者修改build/webpack.base.conf.js文件
//將
entry: {
  app: './src/main.js'
},
//替換為
entry: {
 app: ['babel-polyfill', './src/main.js']
},

問題2. js-base64

問題背景

在引入js-base64進行base64加密時，IE瀏覽器會報錯js-base64有語法問題

解決方法

• 卸載當前版本的js-base64，安裝@2.*版本的

npm uninstall js-base64
npm install js-base64@2.6.2 --save
npm uninstall js-base64

• 使用 window.btoa() 加密,window.atob()解密（兼容IE10以上和其他瀏覽器）

var str = "RUNOOB";
var enc = window.btoa(str);
var dec = window.atob(enc);
var res = "編碼字符串為: " + enc + "<br>" + "解碼后字符串為: " + dec;

問題3. webpack-dev-server版本問題

問題背景

"webpack-dev-server": "^2.11.5",版本IE10以下無法打開,提示報錯 ：SCRIPT1002: 語法錯誤

image.png

查看console發(fā)現webpack打包后的腳本報錯:

/* WEBPACK VAR INJECTION */(function(__resourceQuery) {
/* global __resourceQuery WorkerGlobalScope self */
/* eslint prefer-destructuring: off */
const url = __webpack_require__(61);
const stripAnsi = __webpack_require__(67);
const log = __webpack_require__(69).getLogger('webpack-dev-server');
const socket = __webpack_require__(70);
const overlay = __webpack_require__(102);

顯然，IE10并不支持ES6的const語法，所以當版本升級到2.8.1之后，是無法在IE10下面進行使用和開發(fā)的。
來看看2.7.1版本打包之后，這一塊的腳本是怎樣的

/* WEBPACK VAR INJECTION */(function(__resourceQuery) {/* global __resourceQuery WorkerGlobalScope */
var url = __webpack_require__(61);
var stripAnsi = __webpack_require__(67);
var log = __webpack_require__(69)
var socket = __webpack_require__(70);
var overlay = __webpack_require__(102);

解決方法

• 2.7.1打包之后還是使用的var去聲明變量。所以想要在IE10上使用webpack-dev-server的相關功能，還是將版本先固定在2.7.1。

問題4. IE瀏覽器滾動條隱藏隱藏

::-webkit-scrollbar-track { background-color: rgba(0,0,0,0.2);  }
::-webkit-scrollbar {  width: 0px;height:8px;  background-color: #F5F5F5;border-radius: 5px;  }
::-webkit-scrollbar-thumb { /* */background: #0C4EA2;border-radius: 5px; }
::-webkit-scrollbar-corner{ background-color: #F5F5F5;}
ie隱藏滾動條樣式代碼：
html {
       /*隱藏滾動條，當IE下溢出，仍然可以滾動*/
      -ms-overflow-style:none;
      /*火狐下隱藏滾動條*/
      overflow:-moz-scrollbars-none;
  }
  /*Chrome下隱藏滾動條，溢出可以透明滾動*/
  html::-webkit-scrollbar{width:0px}

• 火狐不允許自定義滾動條樣式,可以用兩個div遮蓋來隱藏，還可以用插件來解決。