css - Flexbox - IE 中元素的高度不正确

Question

在这个 jsfiddle 中: http://jsfiddle.net/VCkLy/

当我们使用 Chrome 并调整窗口大小时，使视频的大小小于其实际宽度时，带有元素的“日志”框始终附加到视频的底部，而在 IE 中，当视频变大时它会跟随它，尽管当它的大小变得小于其自然宽度 - 视频上方和下方出现两个黑条..无论如何删除它们？

如果我们将“显示”设置为 block 或内联 block ，则不会发生这种情况，但由于元素的性质(这只是一个简化的情况)，我无法将显示更改为“flex”以外的任何其他内容。是否有任何 CSS 调整？

 #content {
  display: inline-block;
  ...
 }

如果可能的话，我也想避免添加设置高度的 JS - 它在 Chrome、Safari、Opera 和 Firefox(带有不同的视频)中工作正常，只是在 IE 中出现错误。谢谢大家!

Answer 1

好的，我刚刚找到了一个有效的 CSS 解决方案，看起来在视频加载后 IE 将默认的最小高度设置为原始视频的高度，但是如果我们用不同的像素值覆盖它，任何非常小的东西，比方说 1px - 那么它工作正常。

#video {
  width: 100%;
  height: auto;        
  min-height: 1px;
}