Li標記在Chrome中未對齊。如何解決它？

Question

我想創建一個菜單和樣式。我還使用了一些css動畫來顯示一個描述（span）在盤旋時的情況。此菜單在Firefox中正常工作。但在Chrome中，菜單上方有一個空白區域。當我通過Firebug檢查li標籤時，顯示li元素未正確對齊。它向上移動。它不在Firefox上發生。 （請檢查下面的截圖）。我怎樣才能解決這個問題？

更新：我剛剛將該網站上傳到了Heroku：http://aqueous-wildwood-4051.herokuapp.com/。你會在這個現場看到這個問題。

在Chrome：

在Firefox：

這裏是我的側邊欄的代碼：

<aside id="sidebar" role="complementary"> 
     <nav id="side-nav" role="navigation"> 
     <ul> 
      <li ><a href="/"><div id='side-nav-home' class='listitem'><span class='listtitle'>Home</span><span class='description'>Home page of SLNYAA</span></div></a></li> 
      <li ><a href="/about"><div id='side-nav-about' class='listitem'><span class='listtitle'>About Us</span><span class='description'>Learn more about us</span></div></a></li> 
      <li ><a href="#"><div id='side-nav-handbook' class='listitem'><span class='listtitle'>Handbook</span><span class='description'>Read our handbook</span></div></a></li> 
      <li ><a href="#"><div id='side-nav-join' class='listitem'><span class='listtitle'>Join Us</span><span class='description'>Join our program</span></div></a></li> 
     </ul> 
     </nav> 
    </aside> 

這裏是CSS：

#sidebar { 
     border-left: 1px solid #EDEDED; 
     box-shadow: -3px 0 9px rgba(217, 217, 217, 0.2); 
     float: right; 
     min-height: 365px; 
     width: 24%; 

     #side-nav{ 


      ul { 
       margin-top: 0px !important; 
       height: 187px; 
       list-style: none outside none; 
       margin-left: 0; 
       padding-left: 0; 
       width: 100%; 

       li{ 
        height: 46px; 

        a{ 
         text-decoration: none; 
         font-size: 14px; 
         color: #fff; 
         text-shadow: 1px 1px 1px #757575; 
         border-right: 1px solid rgba(217, 217, 217, 0); 
         -webkit-transition: all 0.3s ease-in; 
         -moz-transition: all 0.3s ease-in; 
         -o-transition: all 0.3s ease-in; 
         -ms-transition: all 0.3s ease-in; 
         transition: all 0.3s ease-in; 


         .listitem { 
          list-style: none outside none; 
          height: 32px; 
          text-align: center; 
          padding-top: 10px; 
          -webkit-transition: all 0.3s ease-in; 
          -moz-transition: all 0.3s ease-in; 
          -o-transition: all 0.3s ease-in; 
          -ms-transition: all 0.3s ease-in; 
          transition: all 0.3s ease-in; 



          .description { 
           visibility: hidden; 
           position: absolute; 
           font-size: 12px; 
           color: #FFFFFF; 
           font-weight: bold; 
           position: absolute; 
           margin-left: 8px; 
           margin-top: 4px; 
           opacity: 0; 
           -webkit-transition: all 0.6s ease-in; 
           -moz-transition: all 0.6s ease-in; 
           -o-transition: all 0.6s ease-in; 
           -ms-transition: all 0.6s ease-in; 
           transition: all 0.6s ease-in; 
          } 



          &:hover { 
           text-align: left; 


           .description { 
            visibility: visible; 
            opacity: 1; 
           } 

           .listtitle{ 
            margin-left: 7px; 
            border-right: 1px solid #FFFFFF; 
            padding-right: 7px; 
           } 
          } 
         } 


        } 
       } 

       #side-nav-home{ 
        background-color: #ED0042; 
        border: 2px solid #E87998; 
       } 

       #side-nav-about{ 
        background-color: #e1cf3b; 
        border: 2px solid #C4BD80; 
       } 

       #side-nav-handbook{ 
        background-color: #009dda; 
        border: 2px solid #5EADCC; 
       } 

       #side-nav-join{ 
        background-color: #6ba01e; 
        border: 2px solid #98AB7D; 
       } 


      } 
     }  
    } 

Answer 1

添加display: block到a CSS樣式

#main-container-border #main-container #sidebar #side-nav ul li a { 
    display: block; 
    text-decoration: none; 
    font-size: 14px; 
    color: #fff; 
    text-shadow: 1px 1px 1px #757575; 
    border-right: 1px solid rgba(217, 217, 217, 0); 
    -webkit-transition: all 0.3s ease-in; 
    -moz-transition: all 0.3s ease-in; 
    -o-transition: all 0.3s ease-in; 
    -ms-transition: all 0.3s ease-in; 
    transition: all 0.3s ease-in; 
} 

jsfiddle