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形式,切记!!!