Firefox问题计算宽度w / CSS inline-block＆amp;绝对定位？ （Twitter Bootstrap下拉菜单）

Question

我正在使用Twitter Bootstrap HTML / CSS框架，特别是dropdown menus。我正在尝试添加一个在每个菜单项中可见且右对齐的“键盘快捷键”。菜单的宽度应调整为适合其内容 - 项目名称（左对齐）和键盘快捷键（右对齐），中间有一些填充。

我有这个工作，除了Firefox在计算菜单宽度时渲染菜单而不包括键盘快捷键的宽度！ （在webkit /特别是Chrome中运行良好。）这是一个屏幕截图，说明在Firefox中键盘快捷键元素如何在主菜单文本后面滑动：

我已将其归结为一个展示问题的相对简单的页面 - 请参阅this jsFiddle link。

如果我确保没有作为菜单父级的DIV是“position：absolute;”，我可以正确地渲染Firefox。看看我标记的两行在CSS中注释掉了。但是，我不明白为什么我不能对包含块使用绝对定位以及为什么这会导致浏览器之间存在任何差异。

如何在不删除包含块的绝对定位的情况下解决此问题的任何线索？感谢。

Answer 1

首先，将position: absolute和float置于同一元素上并不好，因为它们是相互排斥的定位形式（absolute覆盖float）。您可以根据需要消除其中一种。确定哪些对您需要做的更重要。

其次，似乎嵌套了两个absolute div，你需要给出一些宽度来帮助它知道里面的东西。当我将width:100%放在.topbar和.nav上时，它允许菜单成型。但我不知道宽度是否适合您的情况。

您可以绝对定位.topbar而不width，并消除两个子元素上的absolute，它似乎也有效。

我不能给出更多的解决方案，因为我不知道你希望它如何运作和定位。