如何使 Firefox 中的下拉菜单看起来与 Chrome/IE 相同？答案

【问题标题】：How do I make a dropdown in Firefox look the same as Chrome/IE?如何使 Firefox 中的下拉菜单看起来与 Chrome/IE 相同？
【发布时间】：2015-06-01 10:02:54
【问题描述】：

所以，我正在构建一个带有下拉菜单的网站。在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
}

在这里申请的诀窍是什么？

【问题讨论】：

标签： css twitter-bootstrap google-chrome firefox

【解决方案1】：

有趣的是，我猜这个问题可能与下拉菜单无关，而是因为 firefox 以某种方式忽略了填充。好像我错了，因为根据this answer，这是Chrome而不是Firefox的错误

我已经解决了这个问题，只需将li 显示为块

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

【讨论】：