Question

问题：http://i.stack.imgur.com/qisVn.jpg

该网站在IE，Opera和Chrome上看起来很不错，但在Firefox中，我的下拉菜单中的每个图像之间存在差距。我相信问题出在CSS中。

当我删除nave ul li {display：inline-table;}

时，其他浏览器也出现同样的问题

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 */
}

如果这不能解决问题，你有一个可以向我们展示的实例吗？

希望这有帮助。

无法摆脱firefox中的垂直下拉菜单填充

1 个答案: