Div가 Firefox에서 내용을 둘러칩니다.

Question

Firefox가 비디오를 올바르게 둘러 쌀 수 없습니다. 크롬과 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

좋아, 그럼 배트맨 :

이

을보십시오이 사이트입니다

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

html 문서에 추가하십시오!

Answer 2

FYI Mozilla Firefox는 여전히 플렉스 랩을 지원하지 않는 유일한 브라우저입니다. 그것은 단일 라인 flexbox를 지원합니다. (플렉스 랩은 멀티 라인 플렉스 박스를 필요로한다).

기능 파이어 폭스 (게코) - 21.0 - 웹킷 인터넷 익스플로러 - - 10.0 - MOZ 오페라
- 전체 지원 12.10 맥스톤 - 전체 지원 4.0

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

크롬
지원되지 않음

현재 솔루션을 찾고 있습니다 ...

Answer 3

Gecko 레이아웃 엔진 규칙 인 @-moz-document url-prefix()을 시도하십시오. 설명서는 here입니다. 즐겨.