UL LI Horizo​​nal List

Question

我已經創建了一個簡單的UL/LI導航欄。它在IE和Chrome中看起來都非常好，但是在Firefox中，第一個元素之後的任何元素都向下移動了大約35個像素。我已經嘗試過所有可以考慮的事情來解決這個問題，而且似乎無法做到。

任何幫助，這是非常感謝。

這裏是我當前的代碼：

HTML

<div class="navigation"> 
     <ul> 
      <li><a href="" class="button_selected_tab"><span>Home</span></a></li> 
      <li><a href="" class="button_inactive_tab"><span>My Calendar</span></a></li> 
      <li><a href="" class="button_inactive_tab"><span>Catalog</span></a></li> 
      <li><a href="" class="button_inactive_tab"><span>My Learning</span></a></li> 
      <li><a href="" class="button_inactive_tab"><span>Shopping Cart</span></a></li> 
      <li><a href="" class="button_inactive_tab"><span>My Account</span></a></li> 
      <li><a href="" class="button_inactive_tab"><span>Support</span></a></li> 
      <li><a href="" class="button_inactive_tab"><span>Sign Out</span></a></li> 
      <li><a href="" class="button_inactive_tab"><span>Admin View</span></a></li> 
     </ul> 
     <div class="clear_float"> 
      &nbsp; 
     </div> 
    </div> 

CSS：

.navigation { 
      left: 1px; 
      position: absolute; 
      text-align: right; 
      top: 7px; 
      white-space: nowrap; 
     } 

     .navigation ul { 
      list-style: none; 
      margin: 0px; 
      padding: 0px; 
     } 

     .navigation ul li { 
      display: inline; 
      margin-right: 2px; 
     } 

     .navigation ul li a { 
      display: inline-block; 
      line-height: 17px; 
      /* 
     padding: 1px 11px 0px 
     */; 
      text-decoration: none; 
     } 
     a.button_selected_tab { 
      background: transparent url('images/orange_button_right.png') no-repeat scroll top right; 
      display: block; 
      float: left; 
      font: normal 12px arial, sans-serif; 
      height: 28px; 
      margin-right: 6px; 
      padding-right: 7px; /* sliding doors padding */ 
      text-decoration: none; 
      color: #FFFFFF; 
     } 

     a.button_selected_tab span { 
      background: transparent url('images/orange_button_left.png') no-repeat; 
      display: block; 
      line-height: 28px; 
      padding: 0px 10px 10px 15px; 
     } 

     a.button_inactive_tab { 
      background: transparent url('images/grey_button_right.png') no-repeat scroll top right; 
      display: block; 
      float: left; 
      font: normal 12px arial, sans-serif; 
      height: 28px; 
      margin-right: 6px; 
      padding-right: 7px; /* sliding doors padding */ 
      text-decoration: none; 
      color: #FFFFFF; 
     } 

     a.button_inactive_tab span { 
      background: transparent url('images/grey_button_left.png') no-repeat; 
      display: block; 
      line-height: 28px; 
      padding: 0px 10px 10px 15px; 
     } 

Answer 1

我用你的代碼做出了表率，並去除margin-right:2px;從.navigation ul li設置所有的元素在同一條線。這是你需要的嗎？

例子：http://jsbin.com/uhace3