css - Flexbox (css) 中的视频元素仅在 IE 中不居中

Question

我的演示:https://jsfiddle.net/tk14jbry/

在 Chrome/Safari/MS Edge 中的结果符合预期(是的!):

我认为问题出在我的结构上:

<div class="flexbox">
  <video width="320" height="240">...
  </video>
</div>

如何让 IE 11(下面不关心)工作？

(我不想在 .flexbox 和 video 之间添加另一个元素)

Answer 1

将 CSS 中视频元素的 position: absolute; 更改为 position: relative;

您在 flex 容器中有以下内容。该元素的绝对定位不允许容器的对齐属性正常工作。

#Kurzfilm video {
  margin: 0 auto;  
  display: inline-block;
  position: absolute; 
}

更改为:

#Kurzfilm video {
  position: relative; 
}

margin: 0 auto; 没有必要将其居中，因为您已经在容器上设置了对齐属性。 display: inline-block; 也是不必要的。

以下是在 Browserstack 中运行的 Windows 10 上的 IE 11 的屏幕快照: