的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>