Firefox顯示主線和下拉菜單之間的差距增加線高

Question

In this jsfiddle我有一個菜單，顯示一些項目的下拉菜單。主菜單和子菜單項的高度增加。我正在使用line-height屬性來實現此目的。

/* 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是否有更清潔的解決方案？

Answer 1

使用position得到同樣的

更新CSS部分

ul#main-menu li { 
     display: inline-block; 
     line-height: 200%; 
     list-style: none; 
     vertical-align: middle; 
     width: 120px; 
     position:relative; /*add this*/ 
    } 

    ul#header-submenu { 
     display: none; 
     padding: 0; 
     text-align: left; 
     z-index: 1; 
     position:absolute; /*add this*/ 
     top:auto; /*add this you can change as your need */ 
     left:0px; /*add this you can change as your need */ 
} 

/* body ---------------------------------------------------------- */ 
 

 
body { 
 
    font-family: Calibri, sans-serif; 
 
    min-height: 100vh; 
 
    display: flex; 
 
    flex-direction: column; 
 
    margin: 0; 
 
    /* put the top margin into the header, otherwise there will always be a vertical scrollbar */ 
 
} 
 

 

 
/* 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; 
 
    position: relative; 
 
} 
 

 
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; 
 
    position: absolute; 
 
    top: auto; 
 
    left: 0px; 
 
} 
 

 
ul#header-submenu li { 
 
    display: block; 
 
    line-height: 200%; 
 
    padding-left: 5%; 
 
    background-color: #eee; 
 
    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; 
 
}

<!DOCTYPE html> 
 

 
<body> 
 
    <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> 
 
</body> 
 

 
</html>

工作小提琴還包括

fiddle link