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