IE9真的过时了吗? vue2+elementUI2项目在IE9上的兼容问题踩坑

最新推荐文章于 2021-08-03 16:54:00 发布

2名名名名名名名名名名名名名名名名名名名

最新推荐文章于 2021-08-03 16:54:00 发布

阅读量2.1k

点赞数 2

来看我的自定义版权011702

本文链接：https://blog.csdn.net/cpongo2ppp1/article/details/87940121

版权

前言

由于这次项目的定制化开发是面向国企的.需求主要集中在以下三点:

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('上传成功')
			}
		}
	})
}
复制代码