Question

以下是网址：http://www.labeachfit.com/

“更多”下方的下拉菜单在谷歌浏览器中运行正常，但是在Firefox中它会转移到“主页”链接下方。

任何人都知道这个原因是什么原因？ Firefox忽略了什么吗？

有没有办法解决这个问题而不将下拉菜单放在“更多”元素中？

Answer 1

.navbar .nav li状态display:table-cell的CSS定义。它还包含position:relative来为下拉列表建立一个新的定位上下文，以确定其绝对定位 - 这就是为什么你会期望li下面的下拉列表。

然而，标准明确禁止在表格单元格上使用position样式，但是还不清楚这是否还包括设置为与display:table-cell一样的非表格单元格元素。 Firefox就像它一样，忽略position声明，从而将绝对定位的子项置于最近的更高位置上下文 - IE和Chrome都允许它，但只建立一个新的定位上下文，这就是为什么您的代码现在可以在这些浏览器中正常运行。

要解决此问题，请在li内围绕ul添加另一个子元素，该子元素静态位于“表格单元格”内，并position:relative - 这将导致弹出窗口出现在正确的地方。

简而言之：

<body>
  <section style="position:relative;display:table-cell">
    <div style="position:absolute">
      This inner div will be positioned relative to the *body* in FF,
      or to the *section* in Chrome and IE.
    </div>
  </section>
</body>

修复它适用于所有：

<body>
  <section style="display:table-cell">
    <div style="position:relative">
      <div style="position:absolute">
        This inner div will be positioned relative to the section in *all*
        browsers.
      </div>
    </div>
  </section>
</body>

Answer 2

尝试设置下一个css样式（position和float已更改）：

 .dropdown-menu {
    background-clip: padding-box;
    background-color: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    display: none;
    float: right;
    left: 0;
    list-style: none outside none;
    margin: 2px 0 0;
    min-width: 160px;
    padding: 5px 0;
    position: relative;
    top: auto;
    z-index: 1000;
}

Firefox中的下拉菜单转换

2 个答案: