无法在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 */ 
} 

如果不解决这个问题，你有一个活生生的例子，你能告诉我们？

希望这会有所帮助。