Firefox에서 HTML5 이상한 렌더링

Question

내 사이트 본문이 Firefox에서 이상하게 표시됩니다. 래퍼 div는 내용의 높이를 무시합니다. 그리고 내 비디오 플레이어의 이미지는 그들에게 적용된 CSS 규칙을 무시하고 있습니다. 내 사이트 : http://www3.carleton.ca/clubs/sissa/html5/video.html

이는 모습입니다 같은 :

CSS :

#controls img{ 
    height:100%; 
    opacity: 0.3; 
} 
#wrapper{ 
    max-width: 850px; 
    display: -moz-box; 
    display: -webkit-box; /*means this is a box with children inside*/ 
    -moz-box-orient:vertical; 
    -moz-box-flex:1; 
    -webkit-box-orient:vertical; 
    -webkit-box-flex: 1; /*allows site to grow or shrink 1 = flex 0 = statix*/ 
    background: rgba(0,0,0,0.7); 

    z-index: 1; 
} 
#body_div{ 
    display: -webkit-box; 
    -webkit-box-orient:horizontal; 
    display: -moz-box; 
    -moz-box-orient:horizontal; 
    color:#000000; 
    margin-top: 190px; 
} 

BODY의 HTML :

받는 블록 요소를 스트레칭하기 위해

<div id="wrapper"> 
    <section id="body_div"> 

     <div id="dimPlayer" class="dim" onclick="playPause()"></div> 
     <div id="video_container"> 
      <video id="trailers" poster="images/poster/poster.jpg"> 
       <source src="media/vLast.mp4" type="video/mp4"> 
       <source src="media/vLast.webm" type="video/webm"> 
       <track id="mytrack" label="English Subtitles" src="subtitles.vtt" srclang="en" /> 
      </video> 
      <nav> 
       <div id="controls" class="cAnimated fadeInUp fadeInDown"> 
        <div id="defaultBar"> 
         <div id="progressBar"></div> 
        </div> 
        <button id="playButton"><img src="images/icons/play.png" /></button> 
        <button id="vol" onclick="showSlider()"><img src="images/icons/vol.png" /></button>  
        <button id="containSlider"> 
           <input type="range" id="vSlider" min="0" max="1" step="0.1" value="0.5"/></button> 
        <div id='containTime'><span id='timeDisplay'>0:00</span><span>/</span><span id='durationDisplay'>0:00</span></div> 
        <button id="full"><img src="images/icons/full.png" /></button> 
        <button id="mute"><img src="images/icons/mute.png" /></button> 
        <button id="cc">CC</button> 

       </div> 
       <div id="playlist" class="animated fadeInRight"> 
        <div class="thumb" id="tb1"><img src="images/thumbnails/TbGow.jpg" onClick="changeTrailer('media/vGow')"/></div> 
        <div class="thumb" id="tb2"><img src="images/thumbnails/TbLast.jpg" onClick="changeTrailer('media/vLast')"/></div> 
        <div class="thumb" id="tb3"><img src="images/thumbnails/TbTwo.jpg" onClick="changeTrailer('media/vTwo')"/></div> 
       </div> 
      </nav> 
     </div>   
     <aside id="sidebar"> 
      <div id="side_events"> 
       <h1>Upcoming Releases</h1> 
       <ul id="events"> 
        <li><a href="http://www.t3.com/news/half-life-3-rumours-trailer-news-release-date-and-screenshots" target="_blank">Half-Life 3 Release: <time>04/01/13</time></a></li> 
        <li><a href="http://www.examiner.com/article/borderlands-2-writer-talks-about-possible-borderlands-3-plot-points" target="_blank">Borderlands 3 Release: <time>05/29/13</time></a></li> 
        <li><a href="http://www.e3expo.com/" target="_blank">E3 2013 Starting: <time>08/11/13</time></a></li> 
        <li><a href="http://www.theverge.com/2013/2/1/3942142/new-sony-playstation-2013" target="_blank">Playstation 4 Release: <time>08/31/13</time></a> </li> 
        <li><a href="http://www.theverge.com/2012/1/25/2731888/next-xbox" target="_blank">Xbox 720 Release: <time>09/01/13</time></a></li> 
       </ul> 
      </div> 

      <div id="side_trailer"><a href="video.html"><img src="images/thumbnails/TbTwo.jpg" /></a></div> 

      <div id="side_advert"></div>      
     </aside> 

    </section> 

    <footer id="footer"> 
     &copy; Copyright by SimKessy 
    </footer> 

Answer 1

변경 표시 : -moz-box; 표시 할 # 래퍼 : 블록; 속성이 - 당신은 https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_flexible_boxes 체크 아웃, 플렉스 박스를 사용하려는하지만 꽤 구문을 이해하지 않은 것처럼

#wrapper{ 
    max-width: 850px; 
    display: block; 
    ... 

Answer 2

그것의 자식 요소의 높이, 당신은 블록 요소에 float: left;을 추가해야합니다. 경우는 #wrapper입니다.

이미지의 스타일은 잘 적용됩니다. 비디오의 아래쪽 영역을 가리키면 이미지 막대가 opacity: 0.3으로 표시됩니다.