为什么 css 在 Firefox 和 Chrome 中按预期工作时不能在 IE 中工作？

Question

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

上面的 CSS 代码使表单中心在 Chrome 和 Firefox 中对齐，但在 Internet Explorer 中不起作用。在 IE 中，表单水平居中对齐，但不是垂直居中。有什么问题以及如何使其在 IE 中正确对齐？

Answer 1

上面的问题是因为 IE 只对 flex 有部分支持。

包括 align-items: center; 在display: flex;

之后

使 css 在 IE 中得到正确应用。

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

参考：https://stackoverflow.com/a/17156937/5293838

cimmanon提供的解决方案：

您需要仔细阅读有关 caniuse 的说明。 “部分支持” 指支持两个较旧的草案之一，并且他们不做 注意哪个浏览器支持哪个草稿。 IE10支持三月 2012 年的选秀，它是唯一已知这样做的。

http://codepen.io/cimmanon/pen/ApHEy

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