Firefox爲版面添加邊距/填充

Question

我在Firefox中有一些填充和邊距「錯誤」，但我還沒有弄清楚。 This is the test page where the screw-ups are happening.

這是針對黑標題框的HTML/CSS代碼：

 #caption{ 
     position:relative; 
     display:block; 
     margin: -4px 0 0 0; 
     width: 650px; 
     height:68px; 
     background-color: black; 
    } 
        <div> 
         <div id="slider2"> 
          <div> 
           <img src="img/urban.jpg" /> 
          </div> 
          <div> 
           <img src="img/urban2.jpg" /> 
          </div> 
          <div> 
           <img src="img/urban3.jpg" /> 
          </div> 
         </div> 
        <div id="caption"></div> 
       </div> 

這是日程代碼太：你李裏

 #schedule{ 
     height: 500px; 
     background-color: #ededed; 
     padding: 10px 10px 0px 10px; 

    } 
     #schedule h2{ 
      text-align: center; 
      font-family: Arial; 
      color: rgba(0,0,0,.7); 
     } 
     .away{ 
      color: red; 
     } 
     .gameline{ 
      border-bottom: 1px solid rgba(0,0,0,.4); 
     } 


     .lineup > li{ 
      margin: 0 0 7px 0; 
     } 
     #date{ 
      margin: 20px 0 0 0; 
      list-style:none; 
      width: 70px; 
      float:left; 
      padding-right:30px; 
      font-family: 'Esteban', serif; 
      font-family: Arial; 
      font-weight: bold; 
     } 
      #date > .gameline{ 
       border-bottom: 1px dashed rgba(0,0,0,0); 
      } 
     #opponent{ 
      margin: 20px 0 0 0; 
      font-family: 'Esteban', serif; 
      font-family: Arial; 
      list-style:none; 
     } 

       <div id="right"> 
       <div id="schedule"> 
        <h2>2012 Schedule</h2> 
        <ul id="date" class="lineup"> 
         <li>APR. 21</li> 
         <li class="gameline"></li> 
         <li>SEPT. 1</li> 
         <li class="gameline"></li> 
         <li>SEPT. 8</li> 
         <li class="gameline"></li> 
         <li>SEPT. 15</li> 
         <li class="gameline"></li> 
         <li>SEPT. 22</li> 
         <li class="gameline"></li> 
         <li class="away">SEPT. 29</li> 
         <li class="gameline"></li> 
         <li>OCT. 6</li> 
         <li class="gameline"></li> 
         <li class="away">OCT. 13</li> 
         <li class="gameline"></li> 
         <li>OCT. 20</li> 
         <li class="gameline"></li> 
         <li class="away">OCT. 27</li> 
         <li class="gameline"></li> 
         <li>NOV. 3</li> 
         <li class="gameline"></li> 
         <li>NOV. 10</li> 
         <li class="gameline"></li> 
         <li class="away">NOV. 17</li> 
         <li class="gameline"></li> 
         <li>NOV. 24</li> 
        </ul> 

        <ul id="opponent" class="lineup"> 
         <li>Scarlet & Gray Game</li> 
         <li class="gameline"></li> 
         <li>Miami(Ohio)</li> 
         <li class="gameline"></li> 
         <li>Central Florida</li> 
         <li class="gameline"></li> 
         <li>California</li> 
         <li class="gameline"></li> 
         <li>UAB</li> 
         <li class="gameline"></li> 
         <li class="away">Michigan State</li> 
         <li class="gameline"></li> 
         <li>Nebraska</li> 
         <li class="gameline"></li> 
         <li class="away">Indiana</li> 
         <li class="gameline"></li> 
         <li>Purdue</li> 
         <li class="gameline"></li> 
         <li class="away">Penn State</li> 
         <li class="gameline"></li> 
         <li>Illinois</li> 
         <li class="gameline"></li> 
         <li>BYE</li> 
         <li class="gameline"></li> 
         <li class="away">Wisconsin</li> 
         <li class="gameline"></li> 
         <li>Michigan</li> 
        </ul> 
       </div> 

Answer 1

使用（用於日期）和風格的標籤，而不是試圖把兩個李並排，並讓他們匹配。爲標籤設置寬度和float:left。