html - Div 不会环绕 Firefox 中的内容

Question

我无法让容器正确环绕 Firefox 中的视频。Chrome 和 IE 工作正常。这是网站：http ://www3.carleton.ca/clubs/sissa/html5/video.html

HTML：

<div id="video_container">
            <video id="trailers" poster="poster.jpg">
                <source src="vLast.mp4" type="video/mp4">
                <source src="vLast.webm" type="video/webm">
            </video>
            <nav>
               <div id="controls">
                    <button id="playButton">Play</button>
                    <div id="vol" onclick="showSlider()">Vol
                        <div id="containSlider"> 
                            <input type="range" id="vSlider" min="0" max="1" step="0.1" value="0.5"/>
                        </div>
                    </div>      
                    <div id="defaultBar">
                        <div id="progressBar"></div>
                    </div>

                    <button id="mute">Mute</button>
                    <button id="full" onclick="toggleFullScreen()">Full</button>
               </div> 
               <div id="playlist" class="animated fadeInRight">
                    <div class="thumb" id="tb1"><img src="TbGow.jpg" onClick="changeTrailer('vGow')"/></div>
                    <div class="thumb" id="tb2"><img src="TbLast.jpg" onClick="changeTrailer('vLast')"/></div>
                    <div class="thumb" id="tb3"><img src="TbTwo.jpg" onClick="changeTrailer('vTwo')"/></div>
               </div>
            </nav>
        </div>

CSS：

#video_container{
    -webkit-box-flex: 1; 
    -moz-box-flex: 1;
    border:5px solid black;
    margin: 20px;
    padding: 0px;
    width:100%;
    height:100%;
    position: relative;
    background-color:white;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;   
}
#video_container video{
    width: 100%;
    height: auto;
    display: block;
    z-index: 9999;
}

Answer 1

仅供参考 Mozilla Firefox 是唯一仍然不支持 flex-wrap 的浏览器。它仅支持单行 flexbox。（flex-wrap 需要多行 flexbox）。

功能 Firefox (Gecko) - 不支持 Chrome
- 21.0-webkit Internet Explorer - 10.0-moz Opera
- 完全支持 12.10 Maxthon - 完全支持 4.0

https://developer.mozilla.org/en-US/docs/CSS/flex-wrap

我目前正在寻找解决方案...

Answer 2

好吧，那么蝙蝠侠:)

试试这个

<style>
    @-moz-document url-prefix() {
     #video_container{
        min-height:1px;
        max-height:1px;
      }
    }
</style>

将此添加到您的 html 文档中！

Answer 3

Try @-moz-document url-prefix()，这是 Gecko 布局引擎规则。文档可以在这里找到。享受。