flex 在 Internet Explorer 上的工作方式不同

Posted 2023-03-05

【中文标题】flex 在 Internet Explorer 上的工作方式不同

【英文标题】：flex working differently on internet explorer

【发布时间】：2015-01-07 02:54:30

【问题描述】：

我有一个 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>

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

【参考方案1】：

基本上：this，似乎可以工作。

容器：display:flex + height/width

视频：position:absolute;

内容：align-self:center;