为什么 flexbox 居中在 IE 11 中不起作用？答案

【问题标题】：Why is flexbox centering not working in I.E 11?为什么 flexbox 居中在 IE 11 中不起作用？
【发布时间】：2016-06-29 20:40:49
【问题描述】：

我有以下简单动画HERE：

现在我的问题是关于我在 body 元素 I.E. 上的 flexbox 居中代码

HTML：

 <body class="loading-doc">
    <div class="loader">Loading...</div>
</body>

CSS：

.loading-doc  {
    position: fixed;
    height: 100vh;
    width: 100vw;
    background: #fff !important;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align:center;
    -webkit-align-items:center;
        -ms-flex-align:center;
            align-items:center;
    -webkit-box-pack:center;
    -webkit-justify-content:center;
        -ms-flex-pack:center;
            justify-content:center;
    overflow: hidden;
}

上面的代码在所有浏览器中都将 body 的（唯一）子元素居中，除了 IE，有人可以解释为什么吗？

我已经在 I.E. 9 , 10 , 11 （即使我在 Windows 8.1 上，它在浏览器工具中显示为边缘），而 flexbox 只是不起作用，我希望至少 ie 11 可以工作，但它不起作用，为什么？

caniuse.com LISTS ie 11 部分支持 flexbox，我使用的属性是非常基本的 flexbox 属性，所以为什么它们在 ie 11 中不起作用（这也显示为边缘我的即控制台）。有人可以向我解释一下吗？

编辑::

我附上我在下面看到的屏幕截图。

看向中间的右边。

【问题讨论】：

是位置：固定；这里真的需要吗？你试过 display:inline-block 吗？ ...
@GCyrillus 这是一个“为什么”的问题，而不是“如何让它工作”的问题，所以我真的很想知道，为什么这个 CSS 不起作用。
您的动画在我的 PC 上的 Chrome 和 IE11 中居中。没有区别。
你没有边距的小提琴更新jsfiddle.net/1390a5n7/2 flex 在 IE 中仍然存在问题......但你知道你确实提到了 caniuse :)
@Michael_B 嗯，很有趣，你在使用 edge 吗？或者即 11 也是 Windows 8 或 10？

标签： html css internet-explorer cross-browser flexbox

【解决方案1】：

说实话，您提供的代码没有问题。它适用于所有版本的 IE、Safari、Chrome、Firefox 等。我相信问题出在您自己的 IE 版本中。尝试将 IE 重置为默认设置（先备份以确保不会丢失任何内容）。

https://support.microsoft.com/en-us/kb/923737

手动打开“重置 Internet Explorer 设置”对话框

a.关闭当前所有 Internet Explorer 和 Explorer 窗口打开。 b.启动 Internet Explorer。

注意如果您运行的是 Windows 8.1 或 Windows 8，请启动 Internet 桌面的资源管理器。更改设置将影响两者 Internet Explorer 和 Internet Explorer，您从桌面。 c.在工具菜单上，点击或单击 Internet 选项。如果你看不到“工具”菜单，按 Alt。 d. 在 Internet 选项中窗口，点击或单击“高级”选项卡。 e.点击或单击重置。如果如果您使用的是 Windows Internet Explorer 6，请单击恢复默认值。

2.在“重置 Internet Explorer 设置”对话框中，点击或单击“重置”。

注意如果您还想删除个人设置，请选中删除个人设置复选框删除浏览历史、搜索提供程序、加速器、主页，跟踪保护和 ActiveX 过滤数据。 3.Internet Explorer 完成应用默认设置后，点击或单击“关闭”，然后点击或单击“确定”。 4.退出然后启动Internet Explorer。

这发生在我身上，我的 IE 显示的内容与其他人不同。幸运的是，我只使用 IE 进行测试，所以重置不会对我造成任何破坏。但是，重置工作完美并解决了我的问题。让我知道它是否能解决您的问题。

【讨论】：

如果可行，您应该将此答案标记为正确，以便其他人知道它已解决。