【发布时间】：2013-02-17 21:08:54
【问题描述】：
我的网站正文在 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;
}
正文 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">
© Copyright by SimKessy
</footer>
【问题讨论】：
-
看起来您正在尝试使用 Flex Boxes 但还不太了解语法，请查看 developer.mozilla.org/en-US/docs/CSS/Using_CSS_flexible_boxes - 属性是 display : flex，而不是 box （带有 display : -moz-flex和 -webkit-flex 用于跨浏览器兼容性）。 flex 属性也需要应用于子级，而不是父级。我怀疑 flex-direction 是您尝试使用 box-orient 的属性。 flexbox 规范已经改变了好几次，你可能一直在使用一个过时的教程。