flex布局，元素覆盖容器的问题，怎么兼容IE11？

发布于 2022-09-12 12:59:11 字数 1335 浏览 29 评论 0

flex容器内元素覆盖容器的问题，怎么兼容IE11？

如图所示，容器是一个灰色的正方形。容器内的元素是一个黑边框的正方形，在容器内部居中显示。
1、当元素不大于容器时可以居中；
2、当元素超出容器时，IE11里面没法居中了（谷歌浏览器照样可以居中对齐）。

请问该如何设置样式才能让IE里的元素超出容器时也能居中？相关代码如下，欢迎热情的朋友复制粘贴并修改，如果IE11里面可以解决这个问题，欢迎跟帖回复，谢谢！

（经过多次尝试，发现添加 -ms- 前缀的写法没有效果）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .outer {
            background: #efefef;
            height: 80px;
            width: 80px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .inner {
            border: 1px black solid;
            flex-shrink:0;
        }
        @keyframes change
        {
            0%   {width: 20px; height: 20px;}
            50%  {width: 150px; height: 150px;}
            100%   {width: 20px; height: 20px;}
        }
        .inner
        {
            animation-name: change;
            animation-duration: 5s;
            animation-iteration-count: infinite;
        }
    </style>
</head>
<body style='padding: 100px'>
    <div class='outer'>
        <div class='inner'>
            1
        </div>
    </div>
</body>
</html>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

二手情话 2022-09-19 12:59:11

为什么不用定位来实现居中？

.outer {
    background: #efefef;
    height: 80px;
    width: 80px;
    position: relative;
}
.inner {
    border: 1px black solid;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

回复收藏 0

~没有更多了~