無法在Firefox擺脫垂直下拉菜單填充

Question

問題：

該網站看起來IE，Opera和Chrome的罰款，但在Firefox中有我的下拉菜單中每個圖像之間的間隙。我相信問題出在CSS上。

在其他瀏覽器會發生同樣的問題，當我刪除殿UL李{顯示：直列表;}

的CSS：

nav ul ul{ 
display:none; 
position:absolute; 
right:0px; 
top:28px; 
} 
nav ul li:hover > ul{ 
display:block; 
} 
nav ul{ 
z-index:2; 
list-style-type:none; 
padding:0; 
list-style:none; 
position:relative; 
display:inline-table; 
top:-16px; 
} 
nav ul:after{ 
clear:both; 
} 
nav ul li{ 
display:inline-table; 
} 
nav ul ul li{ 
position:relative; 
} 
nav ul ul ul{ 
position:absolute; 
top:0px; 
left:113px; 
} 

的HTML：

<nav><ul><li><a onClick="return true" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Fishing','','buttonsandimgs/fishingover.png',1)"><img src="buttonsandimgs/fishing.png" alt="Fishing" name="Fishing" width="113" height="28" border="0" id="Fishing" /></a> 
     <ul> 
      <li><a href="fishing.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Seasons','','buttonsandimgs/seasonsdropover.png',1)"><img src="buttonsandimgs/seasonsdrop.png" alt="Seasons" name="Seasons" width="113" height="28" border="0" id="Seasons" /></a></li> 
      <li><a onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Species','','buttonsandimgs/speciesover.png',1)"><img src="buttonsandimgs/species.png" alt="Species" name="Species" width="113" height="28" border="0" id="Species" /></a> 
       <ul> 
        <li><a href="pelagicspecies.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Pelagic','','buttonsandimgs/pelagicover.png',1)"><img src="buttonsandimgs/pelagic.png" alt="Pelagic" name="Pelagic" width="113" height="28" border="0" id="Pelagic" /></a></li> 
        <li><a href="reefspecies.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Reef','','buttonsandimgs/reefover.png',1)"><img src="buttonsandimgs/reef.png" alt="Reef" name="Reef" width="113" height="28" border="0" id="Reef" /></a></li> 
        <li><a href="estuarysurfspecies.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Estuary/Surf','','buttonsandimgs/estuarysurfover.png',1)"><img src="buttonsandimgs/estuarysurf.png" alt="Estuary/Surf" name="Estuary/Surf" width="113" height="28" border="0" id="Estuary/Surf" /></a></li> 
        <li><a href="freshwaterspecies.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Freshwater','','buttonsandimgs/freshwaterover.png',1)"><img src="buttonsandimgs/freshwater.png" alt="Freshwater" name="Freshwater" width="113" height="28" border="0" id="Freshwater" /></a></li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
</ul> 

Answer 1

我很確定這是李的高度

嘗試改變：

nav ul li{ 
    display:inline-table; 
} 

要這樣：

nav ul li{ 
    height: 28px; /* Remove the inline-table and set height same as the images */ 
} 

如果不解決這個問題，你有一個活生生的例子，你能告訴我們？

希望這會有所幫助。