IE9真的過期了嗎? vue2+elementUI2項目在IE9上的兼容問題踩坑

前言

因爲此次項目的定製化開發是面向國企的.需求主要集中在如下三點:

• 1,字要大,更大,灰常大! //由於員工年紀比較大
• 2,分辨率得適配1024*768 //由於有的設備會灰常陳舊 !
• 3,必須兼容IE,最起碼得兼容IE9 ! //wtf !
• 4,有時候你得去迎奉他們一些蹩腳的操做習慣和需求.// =.= 吐槽:捨得花那麼多錢定製化軟件,爲何不能升級下顯示器,裝個Chrome啊! =.=

此次的定製化開發是在以前的老代碼上添加新功能.老代碼是12年用extjs 4.1編寫的.如今基本上沒有幾我的會寫extjs代碼,而且客戶要求一個多月就要現場演示.因此最後決定用vue2+element2,而後掛載到extjs代碼上.

下面就開始總結此次IE9踩坑.

1,準備工做

1.1 下載合適的vue版本.

修復v-for在IE上不能編譯和v-loading中止的問題.

最開始使用的是最新版2.5.16.後來發現v-for在IE上沒法編譯.後來在issue #7946 上找到最簡單的辦法就是將版本降到2.5.15.而後問題解決了.考慮到時效性,可能後續版本又解決這個問題了.因此各位選擇本身合適的版本. 補充: 因爲老代碼用的是highcharts 3.在配合v-loading時,有時v-loading不能關閉.目前還沒找到好的解決辦法.如今是經過定時器在半秒後再關閉.固然你也能夠用el-dialog來作個loading(=.=)

1.2 安裝babel-polyfill

解決ES6語法解析問題 雖然polyfill能夠轉換ES6語法.可是建議編寫時仍是使用ES5語法以防萬一.

1.3 儘可能不要使用CSS3

雖然IE9支持部分css3,但仍是頗有限,像flex佈局,CSS3動畫這種就仍是算了.

作到以上三點,基本上能夠杜絕大部分常見的IE bug.但仍是有一些bug是不能避免的.下面就逐個踩坑介紹.你們有遇到其餘的,歡迎補充添加. ==注意:== 建議你們儘可能減小使用watch.由於IE9對它的性能開銷很大!

2,el-table邊框線顯示問題

el-table在IE瀏覽器中常常會出現.中間的border線消失的問題.應該是IE邊框計算的問題,加上以下代碼就好了

.el-table__body, .el-table__footer, .el-table__header {
    border-collapse: separate !important;
}
複製代碼

3,橫向滾動條致使hover高度增長bug

在使用el-table有橫向滾動條時,發如今IE9上會出現table高度忽增忽減的狀況.恭喜你遇到了IE9的專屬bug! 這個bug在IE10上是已經修復了的.

3.1 bug觸發條件:

• 父級css裏設置了overflow-x:auto
• 子元素長度超出,出現了滾動條.而且設有:hover時(el-table裏的tooltip) 這時你hover或拖動滾動條時就會出現table高度的忽增忽減.

3.2解決辦法:

• 非el-table能夠在table父級(指設有overflow屬性的父級)元素外面套一層div.<div style="height: 100%"></div> 但有時這樣可能會影響css樣式.這時你還能夠選擇在父級元素上加上hover .father:hover{ height:100%;}
• 使用el-table則只須要在el-table__body-wrappe上加height:100%

.el-table__body-wrapper{
    height: 100%;
}
複製代碼

4,elementUI中動畫樣式的兼容

elementUI在IE9下radio,checkbox的樣式不一致.緣由就是使用了CSS3的transform和transition屬性. 解決辦法: 解決辦法是很簡單的,也是基本操做.就是給element的transform和transition屬性加上-ms-.

.el-select .el-input .el-select__caret{
   -ms-transition: transform .3s;
   -ms-transform: rotateZ(180deg);
}
複製代碼

5,el-input 中v-model 有時不能正確反應輸入值變化

在使用el-input v-model的值有時不能根據輸入的值實時變化.目前還不是太瞭解是什麼緣由形成的. 解決辦法:

• 使用原生input框: 經測試使用原生input, v-model是能夠正常變化的.若是你想保持v-input的樣式.能夠給原生input加上el-input__inner的class.

• 若是須要繼續使用v-input則須要添加@change事件.@change="function(modelVal){inputVal=modelVal}".這時每次輸完失焦後,都會觸發change事件將v-model值傳給inputVal.固然你不想邊輸入邊變化也能夠用input事件.

6,el-upload不支持在IE9上傳

目前的解決辦法仍是經過jquery.form解決的. jq的兼容性和插件庫仍是最好最豐富的.建議大型複雜項目,最好都引入jQuery! 以備不時之需! 這裏在引入jQuery後,再引入jquery.form插件.使用仍是很是簡單的.不會的能夠查看下面這個例子:

<form id='fileForm' enctype="multipart/form-data" methods="post">
	<input type="file" id="fileInput" @change="update">
<form>
複製代碼

update:function(){
	var _this=this;
	$('#fileForm').ajaxSubmit({
		url:url,  //url地址
		type:'post',
		enctype:'multipart/form-data',
		dataType:'json',
		success: function(res){
				$('#fileForm').restForm();  //重置表單
				if(res.code===0){
				console.log('上傳成功')
			}
		}
	})
}
複製代碼

強烈警告: 在IE9中,若是返回的content-type爲json格式時,此時IE會自動彈出下載彈窗,提醒你下載該文件.此時,須要後端將content-type改成text/html形式,切記!!!