css - Internet Explorer 上的 Flex 无法正常工作

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>

这适用于除 Internet Explorer 之外的所有 Web Explorer。以下是有关该问题的一些屏幕截图:

这是它在 Internet Explorer 上的样子:

不确定为什么 Internet Explorer 没有按应有的方式呈现它。这个网络应用程序应该支持 IE10+，但显然，IE 又做了一次，它搞砸了布局。有想法该怎么解决这个吗？

Answer 1

MSN状态:

In Internet Explorer 10-11 (but not 12+), a flex declaration with a unitless value in its flex-basis part is considered syntactically invalid and will thus be ignored. A workaround is to always include a unit in the flex-basis part of the flex shorthand value.

在你的 .login-body 类中，我删除了 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>