css - 如何使 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 显示为 block 来解决了这个问题

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