vue IE9兼容flex布局

本文主要是介绍vue IE9兼容flex布局，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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

---

好了，开整！

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布局的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---