0

私のサイト本体が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>
4

2 に答える 2

0

表示の変更: -moz-box; #wrapper で display:block; に。

#wrapper{
   max-width: 850px;
   display: block;
   ...
于 2013-02-17T09:41:41.030 に答える
-2

float: left;ブロック要素をその子要素の高さまで伸ばすには、そのブロック要素に追加する必要があります#wrapper。

画像のスタイルは問題なく適用されます。動画の下部にカーソルを合わせると、画像バーに が表示されopacity: 0.3ます。

于 2013-02-17T09:12:25.643 に答える