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

基本上:this , 似乎有效。

容器:display:flex + 高度/宽度

视频:position:absolute;

内容:align-self:center;