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

我發現這不僅限於視頻，而且也發生在圖像上（我嘗試更改策略並遇到相同的問題）。 在對視頻進行較少的谷歌搜索時，我偶然發現了以下codepen： 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>