vue IE9兼容flex布局 css3(转载)

2023-05-16编程技术191944

原文 https://blog.csdn.net/shihezhengshz/article/details/118860562

写这文章的时候的我,心力憔悴鸭,找了好长时间,呜呜┭┮﹏┭┮


好了,开整!

vue版本:vue2   vue-cli 4.x

我是在APP.vue创建前直接进行处理的,下面是代码:

一份JS下载地址:

<script src='https://unpkg.com/flex-native@latest'></script>
<script>
export default { created () {
var userAgent = navigator.userAgent // 获取浏览器信息
var IEReg = new RegExp('MSIE \\d+\\.\\d+;'); // 正则校验IE标识符
var IEMsg = IEReg.exec(userAgent) // 获取字符串
var IEVersionNum = new RegExp('\\d+\\.\\d'); // 正则获取版本 // 是IE9,引入js文件
if(IEMsg && parseFloat(IEVersionNum.exec(IEMsg)) == 9){
import('@/assets/js/flex.native.min.js')
console.log('IE9引入')
}else{
console.log('非IE9不引入')
}
}
}
</script>

CSS需注意点:

1.外部样式书写:每个flex下需加一个  -js-display:flex;

display: flex;
-js-display:flex;

2.内联样式:看github不需要加什么奇怪的东西,下图是github上的

对我有帮助的文章:

文章1:IE9兼容flex布局,以及CSS3
https://blog.csdn.net/weixin_44025495/article/details/110161741
文章2:判断浏览器版本
https://blog.csdn.net/weixin_39695306/article/details/111527248
GitHub大佬的flex转化:
https://github.com/robertpanvip/flex-native

vue IE9兼容flex布局 css3(转载)的相关教程结束。

本文地址:https://www.ufcn.cn/tutorials/2644012.html

如非特殊说明,本站内容均来自于网友自主分享,概不代表本站观点,如有任何问题我们都将在收到反馈后的第一时间进行处理!