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和视频之间添加另一个元素）

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的屏幕快照：