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;