クロムとFirefoxのCSSナビゲーションメニューの問題

Question

こんにちは私はメニューバーを表示するためのCSSコードを書いています。多くの問題が彼らを見つけて解決策を見つけたので、直面した。しかし、私は見つけることができませんでした。
これはクロム出力であり、メニューボックスにはギャップがありますが、Firefoxの場合はまったく問題ありません。その接触。どのように私はこれを解決するのですか？

CSS

#candymenu li { 
    list-style-type: none; 
    display: inline-block; 
    width: 8.1em; 
    float: center; 
    text-align: center; 
    font-family: "Lucida Grande", sans-serif; 
    height: 3em; 
} 
#candymenu ul { 
    width: 100%; 
    margin:0 153px; 

} 


#candymenu li a { 
    display: inline-block; 
    margin 150px;  
    padding: .5em .5em .5em .5em; 
    text-decoration: none; 
} 

#candymenu li { 
    list-style-type: none; 
    display: inline-block; 

    width: 8.1em; 
    float: center; 
    text-align: center; 
    font-family: "Lucida Grande", sans-serif; 
    height: 3em; 
    border-right: 1px #818181 solid; 
    -webkit-box-shadow: 1px 1px #bbb; 
    box-shadow: 1px 1px 1px #bbb; 
} 

#candymenu li a { 
    display: inline-block; 
    padding: .8em .5em .5em .5em; 
    text-decoration: none; 
    color: #292929; 
    text-shadow: 1px 1px 1px #cccccc; 
} 

#candymenu li { 
    background-color: #c9c9c9; 
    background-image: -webkit-gradient(linear, left top, left bottom, from(#c9c9c9), to(#848484), color-stop(0.6, #a1a1a1)); 
} 

#candymenu li:hover { 
    background-color: #dc3d73; 
    background-image: -webkit-gradient(linear, left top, left bottom, from(#dc3d73), to(#4c4c4c), color-stop(0.6, #474747)); 
} 

#candymenu li:hover a { 
    color: #e8e8e8; 
    text-shadow: 1px 1px 0px #353535; 
} 

HTML

<div id="candymenu">  
    <ul> 
     <li id="home"> 
      <a href="">Home</a></li> 
     <li id="Gaming"> 
      <a href="">Gaming</a></li> 
     <li id="Reviews"> 
      <a href="">Reviews</a></li> 
     <li id="News"> 
      <a href="">news</a></li> 
     <li id="Interviews"> 
      <a href="">interviews</a></li> 
     <li id="download"> 
      <a href="">Download</a> </li> 
     <li id="support"> 
      <a href="">Support</a></li> 
     <li id="candy"> 
      <a href="">Candy</a></li> 
     <li id="events"> 
      <a href="">Events</a></li> 
    </ul> 
</div> 

今私はそのギャップを減らす方法を教えてください。

Answer 1

私はインラインブロックの結果が空白に依存するレイアウトだと思っています。

基本的に、すべてのliタグを1行に並べて配置する必要があります。これと同じように：

<div id="candymenu">  
    <ul> 
     <li id="home"><a href="">Home</a></li><li id="Gaming"><a href="">Gaming</a></li> 

など

それがうまくいくなら、私を知ってみましょう！

Answer 2

http://jsfiddle.net/VXsmd/ 変更#candymenu liと#candymenu li a両方のdisplay:inline-blockはdisplay:blockであり、その後も各float:leftを追加します。それは提供されたフィドルでそれを修正したようです。