Flex在Internet Explorer上的工作方式有所不同

Question

我有一个div，我将其用作100vh的高度，以在页面上显示视频，并将内容集中在该div内，我使用flex。 但是，这在IE11上不起作用（这使我感到恐惧，因为它是最新版本）。 有什么办法可以使它起作用？

这是chrome的屏幕截图：

这是IE11的屏幕截图：

如您所见，图片和标语一直到顶部。 这是附带的CSS：

.video-container, .video-container video{
    position: relative;
    min-height: 100vh;
    height: auto;
}
.video-container > video{
    position: absolute;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    background: url(../img/creativebg.png);
    background-size: cover;
}
.video-container, .video-whilst{
    display: flex;
    align-content: center;
    align-items: center;
    text-align: center;
    justify-content: center;
    background-color: transparent;
    color: #fff;
    text-shadow: 1px 1px #333;
}

这是标记：

 <div class="jumbotron video-container">
            <video autoplay loop muted preload="auto" poster="img/post-video.png">
                <source src="vid/bgvid.mp4" type="video/mp4">
                <source src="vid/bgvid.webm" type="video/webm">
            </video>
            <div>
                <h1 class="title-no-title">SwitchHon</h1>
                <img src="img/brand-switchhon.png">
                <h4 class="h4-switchhon-brand">Ideas a todo mecate</h4>
                <a href="#"><img src="img/down-arrow-circle-md.png" class="center-pic down-arrow pulse-grow"></a>
            </div>
        </div>

有没有办法解决这个问题？

Answer 1

基本上： 这似乎有效。

容器： display:flex + height/width

视频： position:absolute;

内容： align-self:center;