Question

我有以下简单动画 HERE ：

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

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;
}

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

我已经在I.E.进行了测试9,10,11（尽管我在Windows 8.1上显示为浏览器工具的边缘），并且flexbox只是不起作用，我期望至少11即可工作，但它确实有＆＃39工作，为什么？

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

修改::

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

向右看中心。

Answer 1

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

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

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

a。关闭当前的所有Internet Explorer和资源管理器窗口   打开。 b。启动Internet Explorer。

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

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

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

这件事发生在我之前，我的IE并没有像其他人一样展示出同样的东西。幸运的是我只使用IE进行测试，因此重置不会对我造成任何损害。然而，重置工作完美并解决了我的问题。如果它修复了你，请告诉我。

为什么flexbox居中不能在I.E 11中工作？

1 个答案: