如何使Firefox中的下拉菜單與Chrome/IE相同？

Question

所以，我正在建立一個帶有下拉菜單的網站。在Chrome它看起來不錯，但在Firefox它不需要填充，我想找到一種方法，使他們在這兩個瀏覽器上看起來相同。

我知道這是一個已知的問題，但我沒有找到一個體面的解決方案，我的問題。

下面是從下拉

守則圖紙上調試

<div class="collapse navbar-collapse" id="MainMenu_nav"> 
    <ul class="navbar-nav nav h> 
     <li aria-haspopup="true" class="HasItems hover focus"> 
     <div class="Wrapper" tabindex="-1"> 
       .... 
      </div> 
     </li> 
    </ul> 
    </div> 

的CSS

.navbar-collapse{ 
    max-height:none; 
    margin-left:-10px; 
    margin-right:-10px; 
} 

.h{ 
    position:relative; 
    back-ground-color:black; 
    margin-left:5px; 
    white-space:nowrap; 
    width:100%; 
    display:table; 
} 

.h>li.hover{ 
    background-color:white; 
    top:3px 
} 
.h>li{ 
    position:Relative; 
    white-space:nowrap; 
    display:table-cell; 
    float:none; 
    vertical-align:middle 
} 

什麼是適用於這裏的伎倆？

Answer 1

有趣的是，我猜想這個問題可能與下拉菜單沒有任何關係，但事實上firefox不知何故忽略了填充。 好像我錯了，因爲根據this answer，這是Chrome和Firefox的不是一個錯誤

我已經簡單地顯示li爲塊固定問題

@-moz-document url-prefix(){ 
    .h >li.hover{ 
     height:45px; 
     display:block; 
     top:3px; 
    } 
}