大家习惯上了flex布局,如果要兼容IE9,怎么办呢,先看看flex的兼容:
笔者从一位大佬偶然得知,一个兼容flex的方法,效果图如下: IE9能看到css3的效果,还有flex局部
下面 demo代码
。
// An highlighted block
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
.box {
width: 500px;
background-color: blue;
border-radius: 10px;
box-shadow: 0 0 10px -1px #000;
}
/* 神奇的是他同时也让 IE9 能使用 CSS3 */
/* flex布局全局设置 并添加 -js-display */
.css-flex {
display: flex;
-js-display: flex;
justify-content: space-between;
}
.box>div {
width: 200px;
height: 200px;
background-color: chartreuse;
}
</style>
</head>
<body>
<div class="box css-flex">
<div></div>
<div></div>
</div>
</body>
<script src='https://unpkg.com/flex-native@latest'></script>
</html>
关键部分就在于这个脚本,因为是用的IE控制台手动修改文档模式,没有真正模拟IE9的环境,大家可以去试一下。
文件下载地址:
github:链接: https://github.com/robertpanvip/flex-native.