Flexbox的孩子在IE11中没有获得正确的高度[重复]

Question

此问题已经在这里有了答案：

Absolute Positioning inside a table cell in IE（2个答案）

关闭1小时前。

请考虑以下代码段（在所有主流浏览器中都可以使用：

body {
  margin: 0;
}

#main {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  background: red;
}

#header {
  background: yellow;
}

#content {
  background: gray;
  flex: 1;
  min-height: 0;
}

table {
  width: 100%;
  height: 100%;
  background: blue;
  color: white;
}

td {
  position: relative;
}

video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<div id="main">

    <div id="header">
      Header
    </div>
    <div id="content">


      <table>
        <tr>
          <td>
            <video controls>
      <source src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/1080/Big_Buck_Bunny_1080_10s_1MB.mp4" type="video/mp4">
    </video>
          </td>
        </tr>
      </table>

    </div>


  </div>

在IE11中，td项目的高度设置为0，而在其他浏览器中，它获得正确的值。

由于这个原因，视频标签也被清零，因此不可见。

这是IE11中的已知问题吗？我知道一些min-height问题（来自https://caniuse.com/#feat=flexbox），但似乎没有关联。

如何在保持对其他浏览器的支持的同时使它在IE11中工作？

Answer 1

您使用td { position: relative }创建了一个新的堆叠上下文，但没有特定的高度/宽度值，IE认为高度/宽度为零。

只需按照代码段中的说明删除td {}并修改您的video {...}（实际上是删除堆栈上下文），您将看到IE可以正常工作。

显然，现代的浏览器已经解决了这个问题。

这将很难通过Stackoverflow进行测试，因为SO（足够多）不再支持IE11 ...

body {
  margin: 0;
}

#main {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  background: red;
}

#header {
  background: yellow;
}

#content {
  background: gray;
  flex: 1;
  min-height: 0;
}

table {
  width: 100%;
  height: 100%;
  background: blue;
  color: white;
}
/* *** REMOVE ***
td {
  position: relative;
}

video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}*/

/* *** KEEP *** */
video { width: 100%; height: 100% }

<div id="main">
    <div id="header">Header</div>
    <div id="content">
        <table>
            <tr>
                <td>
                <video controls>
                    <source src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/1080/Big_Buck_Bunny_1080_10s_1MB.mp4" type="video/mp4">
                </video></td>
            </tr>
        </table>
    </div>
</div>

Answer 2

考虑将<video>内容放入<div>而不是<table>。此外，无需绝对定位它：

body {
  margin: 0;
}

#main {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  background: red;
}

#header {
  background: yellow;
}

#content {
  background: gray;
  flex: 1;
  min-height: 0;
}

#videoWrapper {
  width: 100%;
  height: 100%;
  background: blue;
  color: white;
  position: relative;
  display:flex;
}

video {
  width: 100%;
  height: 100%;
}

<div id="main">

  <div id="header">
    Header
  </div>
  <div id="content">

    <div id="videoWrapper">
      <video controls>
      <source src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/1080/Big_Buck_Bunny_1080_10s_1MB.mp4" type="video/mp4">
    </video>
    </div>

  </div>

</div>