最近在搞一個基于vue的后臺管理系統(tǒng)兼容IE瀏覽器，眼淚都要掉下來。后來和產(chǎn)品說了，同意兼容IE11，感動得我眼淚啊

這里也就是記錄一下我遇到的超級煩的bug

 首先是'babel-polyfill' 和 "autoprefixer-loader" 這個不用多說，資源一大堆

然后 打包之后一直  const  去不掉，查了之后是 webpack 有 webpack-dev 不支持IE低版本了，要把 webpack 版本往下調(diào)，我是拒絕的

1、IE  new Date() 失敗

new Date('2018-1-1')//Mon Jan 01 2018 00:00:00 GMT+0800 (中國標(biāo)準(zhǔn)時間)  chrome//Invalid Date                   IE new Date('2018/1/1')//Mon Jan 01 2018 00:00:00 GMT+0800 (中國標(biāo)準(zhǔn)時間)  chrome//Mon Jan 01 2018 00:00:00 GMT+0800 (中國標(biāo)準(zhǔn)時間)  IE

2、在IE里，點(diǎn)擊 input type=checkbox 多次點(diǎn)擊會邏輯混亂

原因：在 IE中，多次點(diǎn)擊之后會同時出發(fā) dblclick 和 click 事件，而這兩個事件是一起執(zhí)行了 click 事件，會導(dǎo)致click 事件失效

$("input[type='checkbox']").attr('ondblclick', 'this.click()'); 或 $('.content').on('dblclick','input[type="checkbox"]',function(){  this.click();  // 把雙擊事件變成單擊事件 })

注意，要判斷是否是IE瀏覽器，要不然會把chrome 帶進(jìn)溝里

3、input placeholder 會觸發(fā) input 事件

意思就是說你渲染上去了，可能會自動觸發(fā)一次 input，然后清空了文本，又觸發(fā)一次

重點(diǎn)是，IE tm 的不要臉地承認(rèn)了！！說不影響安全，俺們就不修復(fù)了哈

這東西的兼容就見仁見智了，用span 來代替 placeholder 也是可以的嘛，不多嗶嗶

4、Input type=file 中，將 其置空清除 緩存會在IE中觸發(fā) change 事件，

var fileName = $(this).val();filename == undefined

這東西的兼容就見仁見智了，可以判斷一下filename，不多嗶嗶

5、input type=text 中，text-overflow: ellpsis失效

input輸入框如果東西太多，希望展示位   ...  省略號，但是chrome成功了，IE失敗了

需要將 input 標(biāo)簽置為 readonly 才能起作用

沒錯，這東西是 iview select 里的 input標(biāo)簽

So:

initTheSelect () { var input = document.querySelector('.ellipsisInput .ivu-select-selection .ivu-select-input'); input.setAttribute('readonly', true); input.addEventListener('click', function (params) {  input.removeAttribute('readonly');  input.focus() }); input.addEventListener('blur', function (params) {  input.setAttribute('readonly', true); })},

6、在IE中，本系統(tǒng)是 使用了cookie 來保存驗(yàn)證信息的，但是沒多久就能發(fā)現(xiàn)發(fā)送的請求都不攜帶cookie而導(dǎo)致重新登錄

查看了，是304 即讀取緩存的時候，不會攜帶cookie，然后一旦讀到一個  重新登錄，你這個系統(tǒng)基本就完了，一直從緩存里讀取，你登錄了？誒，有緩存，我拿緩存吧。