0
In this jsfiddle我有一個菜單,顯示一些項目的下拉菜單。主菜單和子菜單項的高度增加。我正在使用line-height屬性來實現此目的。Firefox顯示主線和下拉菜單之間的差距增加線高
/* body ---------------------------------------------------------- */
body {
font-family: Calibri, sans-serif;
min-height: 100vh;
display: flex;
flex-direction: column;
margin: 0;
}
/* header ---------------------------------------------------------- */
header {
width: 100%;
}
.header-div {
width: 920px;
margin-left: auto;
margin-right: auto;
}
/* main-menu ---------------------------------------------------------- */
div.float-left-menu {
float: left;
clear: both;
}
ul#main-menu {
display: inline;
padding: 0;
position: relative;
font-size: 1.1em;
text-align: center;
}
ul#main-menu li {
display: inline-block;
line-height: 200%;
list-style: none;
vertical-align: middle;
width: 120px;
}
ul#main-menu li:hover {
background-color: #4f569d;
}
ul#main-menu li a {
background: none;
color: #4f569d;
text-decoration: none;
text-transform: uppercase;
}
ul#main-menu li span {
background: none;
color: #4f569d;
text-transform: uppercase;
}
ul#main-menu li:hover>a {
color: #fff;
text-decoration: none;
}
ul#main-menu li:hover>span {
color: #fff;
}
ul#main-menu li:hover>ul {
display: block;
position: absolute;
/*top: 138%; hack for FF, otherwise there is a gap between the main menu and the dropdown menu*/
}
/* header-submenu ---------------------------------------------------------- */
ul#header-submenu {
display: none;
padding: 0;
text-align: left;
z-index: 1;
}
ul#header-submenu li {
display: block;
line-height: 200%;
padding-left: 5%;
background-color: #bbb;
list-style: none;
vertical-align: middle;
width: 240px;
}
ul#header-submenu li:hover {
background-color: #4f569d;
}
ul #header-submenu li a {
background: none;
color: #4f569d;
text-decoration: none;
}
ul#header-submenu li:hover>a {
color: #fff;
text-decoration: none;
}
<header>
<div class="header-div">
<div class="float-left-menu">
<nav>
<ul id="main-menu">
<li><a href="~/">Item 1</a></li>
<li>
<span>Sub 1</span>
<ul id="header-submenu">
<li><a href="#">SItem 1</a></li>
<li><a href="#">SItem 2</a></li>
</ul>
</li>
<li>
<span>Sub 2</span>
<ul id="header-submenu">
<li><a href="#">SItem 1</a></li>
<li><a href="#">SItem 2</a></li>
</ul>
</li>
<li><a href="#">Item 2</a></li>
</ul>
</nav>
</div>
</div>
</header>
雖然在Chrome,IE和邊緣其父項目下無縫顯示的下拉菜單中,火狐顯示一個差距,這不僅看起來不利也使得下拉消失時鼠標光標移到那裏進行選擇。該問題不會以「正常」高度顯示。
對於line-height: 200%;
我能夠通過將top: 138%;
添加到下拉列表的ul
來解決此問題,但坦率地說,這種方法太多的嘗試與錯誤。
Firefox是否有更清潔的解決方案?
不要使用行高,而是使用padding-top/-bottom來代替......? – CBroe