IE9兼容flex布局,以及CSS3

最新推荐文章于 2022-12-03 14:20:02 发布

blog_xLi

最新推荐文章于 2022-12-03 14:20:02 发布

阅读量5k

点赞数 4

分类专栏： flex布局-兼容文章标签： css3 flex ie

本文链接：https://blog.csdn.net/weixin_44025495/article/details/110161741

版权

flex布局-兼容专栏收录该内容

1 篇文章 1 订阅

订阅专栏

大家习惯上了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.

blog_xLi

关注

4
点赞
踩
8

收藏

觉得还不错? 一键收藏
4
评论
IE9兼容flex布局,以及CSS3

大家习惯上了flex布局，如果要兼容IE9，怎么办呢，先看看flex的兼容:笔者从一位大佬偶然得知，一个兼容flex的方法，效果图如下: IE9能看到css3的效果，还有flex局部下面 demo代码。// An highlighted block<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" conte
复制链接

扫一扫