的Flex的Internet Explorer不工作

Question

我有以下的CSS和HTML代码：

.login-body{ 
    background: url(../img/bg.png) center center no-repeat; 
    background-size: cover; 
    min-height: 100vh; 
    max-height: 100vh; 
    height: auto; 
    background-color: #26A65B; 
    display: -webkit-box;  
    display: -moz-box;   
    display: -ms-flexbox;  
    display: -webkit-flex;  
    display: flex; 
    align-content: center; 
    align-items: center; 
    justify-content: center; 
} 
.navbar-contarte{ 
    border-radius: 0px; 
    background-color: #27ae60; 
} 
.navbar-contarte a{ 
    color: #fff !important; 
    border: 0; 
} 
.col-centered{ 
    float: none; 
    margin: 0 auto; 
} 
.center-btn-or-img{ 
    display: block; 
    margin: 0 auto; 
} 
.pub-banner-block{ 
    text-align: center; 
    background-color: rgba(255,255,255, 0.4); 
    padding: 20px; 
    border-radius: 4px; 
    box-shadow: 1px 1px 10px #fff; 

} 

HTML：

<nav class="navbar navbar-inverse navbar-contarte navbar-fixed-top"> 
     <div class="container-fluid"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       </button> 
       <a class="navbar-brand" href="#">Contarte</a> 
      </div> 
      <div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1"> 
       <button type="button" class="btn btn-primary navbar-btn">Crear Cuenta</button> 
       <ul class="nav navbar-nav navbar-right"> 
        <li><a href="#">Iniciar Sesión</a></li> 
       </ul> 
      </div> 
     </div> 
    </nav> 
    <div class="login-body"> 
     <div class="pub-banner-block"> 
      <h1>ContarteHN</h1> 
      <h2>Contabilidad y Finanzas<br> automatizadas para tu empresa</h2> 
      <hr> 
      <form method="post" role="form"> 
       <div class="form-group"> 
        <input type="emal" placeholder="email" class="form-control input-lg"> 
        <br> 
        <button type="button" class="btn btn-success btn-lg btn-block">Crear Cuenta</button> 
       </div> 
      </form> 
     </div> 
    </div> 

这对除了IE每个网络资源管理器工作正常。以下是有关这个问题的一些截图：

这里，它是如何看起来在Internet Explorer：

不知道为什么Internet Explorer不是渲染它，因为它应该是。这个网络应用程序假设支持IE10 +，但显然，IE再次这样做，这是拧布局的东西。有想法该怎么解决这个吗？

Answer 1

MSN状态：

在Internet Explorer 10-11（但不12+），柔性声明在其柔性基础部分 无单位的值被认为是语法 无效的，因此将被忽略。解决方法是始终在flex缩写值的基于flex的部分包含一个 单元。

在你.login-body I类删除min-height: 100vh; max-height: 100vh;和更换height:auto（无量纲）至height: 80vh;。现在，该框垂直居中（见全屏模式）：

.login-body{ 
 
    background: url(http://kclr96fm.com/wp-content/uploads/2015/01/keyboard.jpg) center center no-repeat; 
 
    background-size: cover; 
 
    height: 80vh; 
 
    background-color: #26A65B; 
 
    display: -webkit-box;  
 
    display: -moz-box;   
 
    display: -ms-flexbox;  
 
    display: -webkit-flex;  
 
    display: flex; 
 
    align-content: center; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 
.navbar-contarte{ 
 
    border-radius: 0px; 
 
    background-color: #27ae60; 
 
} 
 
.navbar-contarte a{ 
 
    color: #fff !important; 
 
    border: 0; 
 
} 
 
.col-centered{ 
 
    float: none; 
 
    margin: 0 auto; 
 
} 
 
.center-btn-or-img{ 
 
    display: block; 
 
    margin: 0 auto; 
 
} 
 
.pub-banner-block{ 
 
    text-align: center; 
 
    background-color: rgba(255,255,255, 0.4); 
 
    padding: 20px; 
 
    border-radius: 4px; 
 
    box-shadow: 1px 1px 10px #fff; 
 

 
}

<nav class="navbar navbar-inverse navbar-contarte navbar-fixed-top"> 
 
     <div class="container-fluid"> 
 
     <!-- Brand and toggle get grouped for better mobile display --> 
 
      <div class="navbar-header"> 
 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
 
       <span class="sr-only">Toggle navigation</span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
       </button> 
 
       <a class="navbar-brand" href="#">Contarte</a> 
 
      </div> 
 
      <div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1"> 
 
       <button type="button" class="btn btn-primary navbar-btn">Crear Cuenta</button> 
 
       <ul class="nav navbar-nav navbar-right"> 
 
        <li><a href="#">Iniciar Sesión</a></li> 
 
       </ul> 
 
      </div> 
 
     </div> 
 
    </nav> 
 
    <div class="login-body"> 
 
     <div class="pub-banner-block"> 
 
      <h1>ContarteHN</h1> 
 
      <h2>Contabilidad y Finanzas<br> automatizadas para tu empresa</h2> 
 
      <hr> 
 
      <form method="post" role="form"> 
 
       <div class="form-group"> 
 
        <input type="emal" placeholder="email" class="form-control input-lg"> 
 
        <br> 
 
        <button type="button" class="btn btn-success btn-lg btn-block">Crear Cuenta</button> 
 
       </div> 
 
      </form> 
 
     </div> 
 
    </div>