vue IE9兼容flex布局 css3(转载)
2024-10-21 20:37:56
原文 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
最新文章
- c++宏使用总结【转】
- 移动端网页fixed布局问题解决方案
- 升级10.11.6后CocoaPods的坑,之前10.11.4已经安装好的,居然没了Failed to locate Homebrew!
- 西邮Linux兴趣小组2016免试题
- Zookeeper相关知识
- 设置webconfig 解决asp.net上传文件过大问题
- python基础-软件目录开发规范
- CentOS Gnome 识别 NTFS-3G
- Vue学习之路---No.2(分享心得,欢迎批评指正)
- 九度OJ题目1443:Tr A (JAVA)
- “前”方有坑,绕道而行(一)-- H5+CSS
- Linux设备驱动编程---miscdevice杂类设备的使用方法
- php 计算两点地理坐标的距离
- 团队-爬虫豆瓣top250项目-模块测试过程
- mysql基本操作(二)
- java 构造json对象数组
- 进程间通信 IPC(Inter-Process Communication)
- 获取CheckBox的Text值
- PHP数据库连接失败--could not find driver 解决办法
- maven学习(6)-Maven依赖范围
热门文章
- vue学习笔记:环境搭建
- mysql版本升级 5.7.21-8.0.30
- How to Use Arrays and Vectors
- [后端-python实战总结]-chapter1-python基础01
- 数据库基础day1
- oracle 2个数组列,剔除数组重复的数据。
- vue项目,本地启动时,请求地址会自动加上http://localhost:
- redis底层数据结构之简单动态字符串(SDS)
- redis底层数据结构之快速列表(quicklist)
- java中的Filter(过滤器)和Intercepter(拦截器)的认知