为什么'；当css在Firefox和Chrome中按预期工作时，它是否在IE中工作？

上面的CSS代码使表单中心在Chrome和Firefox中对齐，但在InternetExplorer中不起作用。在IE中，表单是水平居中对齐的，但不是垂直对齐的。在IE中有什么不对的地方，以及可以采取什么措施使其正确对齐？

上述问题是因为IE仅部分支持flex

包括对齐项目：居中后显示：flex

使css在IE中得到正确应用

感谢Rachel Gallen向我指出问题在于IE中的flex支持

参考：

cimmanon提供的解决方案：

你需要仔细阅读有关caniuse的说明。“部分支持” 指支持两个较旧的草稿中的一个，并且它们不会产生错误 注意哪个浏览器支持哪个草稿。IE10支持游行 2012年选秀，这是唯一一个已知的这样做

---

样式必须在标题部分内为什么样式应该在标题部分内？因为它是html约定好的，我已经在标题部分中包含了它。但是css似乎没有在IE中得到正确的应用？那么有什么建议吗？flex在IE中只有部分支持；它支持ie10中较旧的语法，但由于存在大量bug，ie11中只提供部分支持。。请看，这是导致您的问题的最可能原因，在edge看来应该没问题。感谢您赞扬我指出了问题，但也要归功于cimmanon[，编写您引用的答案的用户。包括答案链接的呼叫很好，但最好插入带有ReferenceHanks的答案的引用副本，当然我也会包括答案的引用副本：）

    input[type=text], input[type=password], select {
        width: 100%;
        padding: 12px 20px;
        margin: 8px 0;
        display: inline-block;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
    }
    input[type=submit] {
        width: 100%;
        background-color: #808080;
        color: white;
        padding: 14px 20px;
        margin: 8px 0;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }
    input[type=submit]:hover {
        background-color: #A9A9A9;
    }
    html,body {
      height:100%;
      width:100%;
      margin:0;
    }
    body {
      display:flex;
      background-color:#D3D3D3;
    }
    form {
      margin:auto;
    }

 .box {
       display: -webkit-box;
       display: -moz-box;
       display: -ms-flexbox;
       display: -webkit-flex;
       display: flex;
       -webkit-box-pack: center;
       -moz-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
       -moz-box-align: center;
      -ms-flex-align: center;
       -webkit-align-items: center;
       align-items: center;
       /* fix for old FF */
       width: 100%;
     }