考虑一下这个片段(适用于所有主要浏览器(：
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中实现这一点，同时保留对其他浏览器的支持？
考虑将<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>您使用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>更新
为了方便起见，我添加了一个更广泛的片段，显示了一个具有多列和多行的表。禁用了table width/height，添加了table border-collapse和演示td {...}，同样没有position: relative。已测试可在IE11中工作(9，10模式(。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SO 60492668</title>
<style>
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%; /* temporary disabled */
/* height: 100%; /* temporary disabled */
background: blue;
color: white;
border-collapse: collapse; /* ADD */
}
/* *** REMOVE ***
td {
position: relative;
}
video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}*/
/* *** KEEP *** */
td { border: 1px solid rgba(0,0,0,.3); padding: .5rem } /* DEMO */
video { width: 100%; height: auto; max-width: 20rem }
</style>
</head>
<body>
<div id="main">
<div id="header">Header</div>
<div id="content">
<table>
<tr>
<td>column 1</td>
<td>column 2</td>
<td>column 3</td>
<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>
<td>column 5</td>
</tr>
<tr>
<td>column 1</td>
<td>column 2</td>
<td>column 3</td>
<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>
<td>column 5</td>
</tr>
<tr>
<td>column 1</td>
<td>column 2</td>
<td>column 3</td>
<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>
<td>column 5</td>
</tr>
<tr>
<td>column 1</td>
<td>column 2</td>
<td>column 3</td>
<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>
<td>column 5</td>
</tr>
</table>
</div>
</div>
</body>
</html>