定位在Firefox和谷歌瀏覽器不匹配

Question

第一個圖像是它在谷歌瀏覽器中的樣子（正確），第二個圖像是它在firefox中看起來（不正確）的樣子。

任何可能幫助我解決這個問題的提示？謝謝。

<div class="container"> 
    <div id="top"> 
     <div class="top-bar"> 
      <div id="logo"></div> 
      <div class="top-bar-red-stripe"> 
       <ul class="top-bar-social-btns"> 
        <li><a href="" class="top-bar-twitter-btn">facebook</a></li> 
        <li><a href="" class="top-bar-facebook-btn">facebook</a></li> 
       </ul> 
      </div> 
     </div><!-- /.top-bar --> 

     <div id="top-left-content"> 
      <h3>This is a title</h3> 
      <div class="race-drivers"></div> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p> 
     </div> 

     <div id="video-content"> 
      <h3>LATEST WEBISODE</h3> 
      <div class="video-file"></div> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing</p> 

      <a href="#" class="all-webisodes-btn">View all webisodes</a> 
     </div> 

     <div id="vote-content"> 
      <h3>VOTE FOR WHAT HAPPENS NEXT</h3>   

      <div class="vote-bar"> 
       <a href="#" class="vote-enhancements">Enhancements</a> 
       <a href="#" class="vote-compass">Compass</a> 
       <a href="#" class="vote-activities">Activities</a> 
       <a href="#" class="vote-btn">Vote</a> 
      </div> 
     </div><!-- #vote-content --> 
    </div><!-- /#top --> 
</div><!-- /.container --> 

.container { 
    width: 960px; 
    margin: 0 auto; 
    border: @outside-border; 

    #top { 
     background: #000 url('../images/top_background.jpg') no-repeat; 
     height: 505px; 

     #video-content { 
      position: absolute; 
      margin: 0; 
      padding: 0; 
      top: 85px; 
      right: 239px; 

      border: 1px solid red; 
      width: 500px; 


      h3 { 
       margin: 0; 
      } 

      p { 
       margin: 0; 
      } 

      .video-file { 
       position: absolute; 
       background: #ccc; 
       border: 2px solid #3592cd; 
       width: 400px; 
       height: 240px; 
      }// .video-file 

      a.all-webisodes-btn:link, a.all-webisodes-btn:visited { 
       display: inline-block; 
       overflow: hidden; 
       text-indent: -9999px; 
       background: transparent url('../images/all-webisodes-btn.png') no-repeat; 
       width: 88px; 
       height: 65px; 
       position: absolute; 
       top: 107px; 
       right: -2px; 
      }// .all-webisodes-btn 
     }// #video-content 

     #vote-content { 
      width: 442px; 
      position: absolute; 
      top: 328px; 
      right: -523px; 
      position: relative; 

      h3 { 
       margin: 0 0 0 15px; 
      } 

      .vote-bar { 
       position: relative; 
       //border:1px solid red; 
       background: transparent url('../images/vote-bar-bg.png') no-repeat; 
       width: 438px; 
       height: 73px; 
       position: relative; 

       a:link, a:visited { 
        display: inline-block; 
        overflow: hidden; 
        text-indent: -9999px; 
       } 

       a.vote-enhancements:link, a.vote-enhancements:visited { 
        background: transparent url('../images/enhancements_btn.png') no-repeat; 
        width: 86px; 
        height: 42px; 
        position: relative; 
        top: 10px; 
        left: 170px; 
       } 

       a.vote-compass:link, a.vote-compass:visited { 
        background: transparent url('../images/compass_btn.png') no-repeat; 
        width: 52px; 
        height: 42px; 
        position: relative; 
        top: 10px; 
        left: 190px; 
       } 

       a.vote-activities:link, a.vote-activities:visited { 
        background: transparent url('../images/activities_btn.png') no-repeat; 
        width: 56px; 
        height: 42px; 
        position: relative; 
        top: 10px; 
        left: 210px; 
       } 

       a.vote-btn:link, a.vote-btn:visited { 
        background: transparent url('../images/vote-now-btn.png') no-repeat; 
        width: 141px; 
        height: 34px; 
        position: relative; 
        top: 47px; 
        left: 73px; 
       } 
      }// .vote-bar 

     }// .vote-content 

    }// #top 
}// .container 

UPDATE：固定，設置位置相對的＃視頻的內容和設置位置，以絕對的子元素

#video-content { 
    width: 500px; 
    position: relative; 
    top: 10px; 
    left: 459px; 

    h3 { 
     margin: 0; 
    } 

    .video-file { 
     position: absolute; 
     background: #ccc; 
     border: 2px solid #3592cd; 
     width: 400px; 
     height: 240px; 
    }// .video-file 

    a.all-webisodes-btn:link, a.all-webisodes-btn:visited { 
     display: inline-block; 
     overflow: hidden; 
     text-indent: -9999px; 
     background: transparent url('../images/all-webisodes-btn.png') no-repeat; 
     width: 88px; 
     height: 65px; 
     position: absolute; 
     top: 100px; 
     right: -3px; 


    }// .all-webisodes-btn 
}// #video-content 

Answer 1

它看起來像＃視頻內容元素可能在Firefox中有餘量。這應該在絕對定位元素之前被移除。

在你的CSS的開始試試這個：

* { margin: 0; padding: 0px; }