Firefox 使用 CSS inline-block 和 CSS inline-block 计算宽度时出现问题绝对定位？ （Twitter Bootstrap 下拉菜单）
我正在使用 Twitter Bootstrap HTML/CSS 框架，特别是 下拉菜单。我正在尝试添加一个“键盘快捷键”，该快捷键在每个菜单项中可见且右对齐。菜单的宽度应该调整以适应其内容——项目名称（左对齐）和键盘快捷键（右对齐），中间有一些填充。
我有这个工作，除了 Firefox 在计算菜单宽度时渲染菜单时不包括键盘快捷键的宽度！ （在 webkit/特别是 Chrome 中工作正常。）下面的屏幕截图说明了 Firefox 中键盘快捷键元素如何在主菜单文本后面滑动：
我已将其归结为一个相对简单的页面来演示该问题 - 请参阅 this jsFiddle链接。
如果我确保菜单父级的 DIV 都不是“position:absolute;”，我就可以使 Firefox 正确渲染。请参阅我在 CSS 中标记为注释掉的两行。但是，我不明白为什么我不能对包含块使用绝对定位，也不明白为什么这会导致浏览器之间存在任何差异。
关于如何在不删除包含块的绝对定位的情况下解决此问题的任何线索？谢谢。
I am using the Twitter Bootstrap HTML/CSS framework, and specifically the dropdown menus. I'm attempting to add a "keyboard shortcut" that would be visible and right-aligned within each menu item. The menu's width should adjust to fit its contents -- both the item name (left aligned) and the keyboard shortcut (right aligned) with some padding in between.
I have this working, with the exception of Firefox rendering the menu without including the width of the keyboard shortcut when it calculates the width of the menu! (Works fine in webkit / specifically Chrome.) Here's a screenshot illustrating how in Firefox the keyboard shortcut elements slide behind the primary menu text:
I've boiled this down to a relatively simple page demonstrating the issue -- see this jsFiddle link.
I can make Firefox render correctly if I make sure that no DIVs that are parents of the menu are "position: absolute;". See the two lines I've marked to comment out in the CSS. However, I don't see why I can't use absolute positioning for the containing blocks and why that would cause any difference between browsers.
Any clues of how I can resolve this without removing the absolute positioning of containing blocks? Thanks.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
首先，将
position:absolute和float放在同一个元素上并没有什么好处，因为它们是互斥的定位形式（absolute覆盖浮动）。您可以根据需要消除其中之一。确定哪一个对您需要做的事情更重要。其次，似乎有两个
absolutediv 嵌套，您需要提供一些宽度来帮助它知道里面有东西。当我将width:100%放在.topbar和.nav上时，菜单就成型了。但我不知道宽度是否适合您的情况。您可以绝对定位没有
width的.topbar并消除两个子元素上的absolute，它似乎也有效。我无法提供更多解决方案，因为我具体不知道您希望它如何发挥作用和定位。
First, it does no good to put both
position: absoluteandfloaton the same element, as they are mutually exclusive forms of positioning (absoluteoverridesfloat). You can eliminate one or the other depending on your needs. Determine which is more important for what you need to do.Second, it appears that having two
absolutedivs nested you need to give some width to help it know something is inside. When I putwidth:100%on the.topbarand.navit allowed the menu to take shape. But I don't know if width is viable for your situation.You can absolutely position the
.topbarwithoutwidthand eliminate theabsoluteon both child elements and it seemed to work also.I can't give much more of a solution, because I don't know specifically how you want it to function and position.