HTML5 自适应宽度视频使父容器高度在 IE11 中扩展

Question

我正在尝试以 2 x X 布局（其中 X 是任意行数）获取 HTML5 视频的布局。不幸的是，这在 IE11 中是有问题的，如果我没有在视频上指定宽度，父容器的高度将保持在该高度，我找不到解决它的方法。

重现问题的示例代码：

body {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  position: relative;
}
* {
  box-sizing: border-box;
}
.sfSite-section {
  background-color: #fff;
  border-bottom: 5px solid red;
  padding: 30px 100px;
  text-align: center;
}
h1 {
  font-size: 48px;
  line-height: 48px;
  margin-bottom: 20px;
}
p {
  font-size: 14px;
  margin-bottom: 10px;
  padding: 0;
}
.sfVideoList {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  justify-content: center;
}
.sfVideoList-videoContainer {
  -webkit-box-flex: 0;
  -webkit-flex: 0 1 auto;
  -moz-box-flex: 0;
  -moz-flex: 0 1 auto;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 10px;
  width: 50%;
}
.sfVideoList-videoClose {
  color: #fff;
  cursor: pointer;
  display: none;
  font-size: 4.8rem;
  line-height: 2.6rem;
  padding: 10px;
  position: absolute;
  right: 0;
  text-shadow: 0 0 5px #2a2c35;
  top: 0;
}
.sfVideoList-video {
  height: 100%;
  width: 100%;
}

<main class="sfSite-section" role="main">
  <h1>Welcome</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque et tellus sit amet iaculis. Donec sodales laoreet ipsum, vitae ultrices sapien viverra id. Mauris suscipit convallis metus tempor suscipit. Morbi ac dignissim erat. Nulla fringilla
    quam nisl, convallis auctor justo aliquam eget. Aliquam vitae urna tellus. Duis consectetur, nisl ut gravida efficitur, nisl ex auctor orci, nec luctus felis urna at tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
    himenaeos. Aenean id porta eros. Phasellus ut metus at lectus efficitur egestas eu sit amet ex. Sed accumsan id leo eget mollis. Nulla facilisi.</p>
  <p>Cras efficitur eros urna, sit amet finibus diam mollis et. Suspendisse eros tellus, mollis eu facilisis quis, placerat non magna. Vestibulum eget dictum leo. Phasellus mauris velit, suscipit in ipsum sed, porta s agittis massa. Curabitur diam nisi,
    consectetur eu mollis in, sodales sit amet quam. Cras cursus eu metus nec luctus. Ut posuere quis arcu vel eleifend.</p>

  <div class="sfVideoList">
    <div class="sfVideoList-videoContainer">
      <i class="fa fa-times sfVideoList-videoClose" aria-hidden="true"></i>
      <video class="sfVideoList-video" controls>
        <source src="http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4">Your browser does not support HTML5 video.
      </video>
    </div>

    <div class="sfVideoList-videoContainer">
      <i class="fa fa-times sfVideoList-videoClose" aria-hidden="true"></i>
      <video class="sfVideoList-video" controls>
        <source src="http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4">Your browser does not support HTML5 video.
      </video>
    </div>
  </div>
</main>

我试过在容器上使用 display:flex，我试过在视频上使用 display:inline-block，我试过设置 height:auto，但都无济于事，现在我没主意了。这似乎只发生在大型视频上。欢迎所有建议！

Answer 1

我发现这不仅限于视频，也发生在图像上（我尝试改变策略并遇到同样的问题）。在对视频进行更多的谷歌搜索时，我偶然发现了这个代码笔：https://codepen.io/leonderijke/pen/nxFhH

很简单，答案是将容器的 height 设置为 0，同时将 padding-bottom 设置为图像纵横比的正确百分比。

这是该代码笔的代码，以防万一：

.container {
  width: 600px;
}

.media {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 50%;
}

.media-body {
  border: 1px solid black;
}

.media-image {
  height: 0;
  padding-bottom: 56%; /* (Width / Height * 100) */
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

<div class="container">
  <div class="media">
    <!--
      This div will get sized based on its children. Necessary, because Firefox doesn't handle the padded box (.media-image) very well as a flex-item.
    -->
    <div>
      <div class="media-image">
        <img src="//placehold.it/600x336.png"/>
      </div>
    </div>
    <div class="media-body">
      <h3>The title</h3>
      <p>
        Just some filler text because Lorum Ipsum is too boring. You know, reasons.
      </p>
    </div>
  </div>
</div>

因为我的图像可以是任何宽度或高度，我不得不遗憾地在这里使用 JavaScript 生成 CSS。我确实确保这只需要在 IE11 上发生，尽管如您所见：

var isIE11 = !!window.MSInputMethodContext && !!document.documentMode;

$(function() {
  if (isIE11) {
    $('.sfVideoList-videoPreviewImg').each(function() {
      var width = $(this).outerWidth();
      var percentage = (($(this).outerHeight() / width) * 100) + '%';

      $(this).css('width', '100%').parent().css({
        'height': '0px',
        'padding-bottom': percentage
      });
      $(this).closest('.sfVideoList').css('height', 'auto');
    });
  }
});

body {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  position: relative;
}
* {
  box-sizing: border-box;
}
.sfSite-section {
  background-color: #fff;
  border-bottom: 5px solid red;
  padding: 30px 100px;
  text-align: center;
}
h1 {
  font-size: 48px;
  line-height: 48px;
  margin-bottom: 20px;
}
p {
  font-size: 14px;
  margin-bottom: 10px;
  padding: 0;
}
.sfVideoList {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  justify-content: center;
}
.sfVideoList-videoContainer {
  -webkit-box-flex: 0;
  -webkit-flex: 0 1 auto;
  -moz-box-flex: 0;
  -moz-flex: 0 1 auto;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 10px;
  width: 50%;
}
.sfVideoList-videoPreview {
  cursor: pointer;
  position: relative;
}
.sfVideoList-videoPreview::before {
  color: #fff;
  content: "\f144";
  font: normal normal normal 3rem/1 FontAwesome;
  left: 50%;
  opacity: 0.75;
  position: absolute;
  text-shadow: 0px 0px 6px #2a2c35;
  top: 50%;
  transform: translate(-50%, -50%);
}
.sfVideoList-videoPreviewImg {
  width: 100%;  
}
.sfVideoList-videoScreen {
  display: none;
}
.sfVideoList-videoClose {
  color: #fff;
  cursor: pointer;
  display: none;
  font-size: 4.8rem;
  line-height: 2.6rem;
  padding: 10px;
  position: absolute;
  right: 0;
  text-shadow: 0 0 5px #2a2c35;
  top: 0;
}
.sfVideoList-video {
  height: 100%;
  width: 100%;
}
@media all and (-ms-high-contrast:none) {
  .sfVideoList {
    height: 0;
    overflow: hidden;
  }

  .sfVideoList-videoPreviewImg {
    width: auto;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main class="sfSite-section" role="main">
  <h1>Welcome</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque et tellus sit amet iaculis. Donec sodales laoreet ipsum, vitae ultrices sapien viverra id. Mauris suscipit convallis metus tempor suscipit. Morbi ac dignissim erat. Nulla fringilla
    quam nisl, convallis auctor justo aliquam eget. Aliquam vitae urna tellus. Duis consectetur, nisl ut gravida efficitur, nisl ex auctor orci, nec luctus felis urna at tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
    himenaeos. Aenean id porta eros. Phasellus ut metus at lectus efficitur egestas eu sit amet ex. Sed accumsan id leo eget mollis. Nulla facilisi.</p>
  <p>Cras efficitur eros urna, sit amet finibus diam mollis et. Suspendisse eros tellus, mollis eu facilisis quis, placerat non magna. Vestibulum eget dictum leo. Phasellus mauris velit, suscipit in ipsum sed, porta s agittis massa. Curabitur diam nisi,
    consectetur eu mollis in, sodales sit amet quam. Cras cursus eu metus nec luctus. Ut posuere quis arcu vel eleifend.</p>

  <div class="sfVideoList">
    <div class="sfVideoList-videoContainer">

      <div class="sfVideoList-videoPreview">
        <img class="sfVideoList-videoPreviewImg" src="//placehold.it/600x336.png" />
      </div>

      <div class="sfVideoList-videoScreen">
        <i class="fa fa-times sfVideoList-videoClose" aria-hidden="true"></i>
        <video class="sfVideoList-video" controls>
          <source src="http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4">Your browser does not support HTML5 video.
        </video>
      </div>
    </div>

    <div class="sfVideoList-videoContainer">

      <div class="sfVideoList-videoPreview">
        <img class="sfVideoList-videoPreviewImg" src="//placehold.it/600x336.png" />
      </div>


      <div class="sfVideoList-videoScreen">
        <i class="fa fa-times sfVideoList-videoClose" aria-hidden="true"></i>
        <video class="sfVideoList-video" controls>
          <source src="http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4">Your browser does not support HTML5 video.
        </video>
      </div>
    </div>
  </div>
</main>

HTML5 自适应宽度视频使父容器高度在 IE11 中扩展

HTML5 responsive width video makes parent container height expanded in IE11

html

css

internet-explorer

html5-video

responsive-design