Firefox выпускает расчет ширины с CSS-блоком и абсолютным позиционированием?(Раскрывающееся меню Twitter Bootstrap)

Question

Я использую Twitter Bootstrap HTML / CSS-фреймворк и, в частности, раскрывающиеся меню . Я пытаюсь добавить «сочетание клавиш», которое было бы видно и выровнено по правому краю в каждом пункте меню. Ширина меню должна соответствовать его содержимому - как название элемента (выровненное по левому краю), так и сочетание клавиш (выровненное по правому краю) с некоторыми отступами между ними.

У меня это работает, за исключением того, что Firefox отображает меню без учета ширины сочетания клавиш при расчете ширины меню! (Отлично работает в webkit / особенно в Chrome.) Вот скриншот, иллюстрирующий, как в Firefox элементы сочетания клавиш скользят за текстом основного меню:

Я свел это к относительно простой странице, демонстрирующей проблему - см. эту ссылку jsFiddle .

Я могу сделать так, чтобы Firefox правильно отображал, если я удостоверяюсь, что никакие DIV, которые являются родителями меню, не являются «position: absolute;». Посмотрите на две строки, которые я пометил для комментирования в CSS. Однако я не понимаю, почему я не могу использовать абсолютное позиционирование для содержащихся блоков и почему это может привести к разнице между браузерами.

Любые подсказки, как я могу решить эту проблему, не удаляя абсолютное позиционирование содержащихся блоков? Благодаря.

Answer 1

Во-первых, нехорошо ставить и position: absolute, и float на один и тот же элемент, поскольку они являются взаимоисключающими формами позиционирования (absolute переопределяет float).Вы можете устранить один или другой в зависимости от ваших потребностей.Определите, что более важно для того, что вам нужно сделать.

Во-вторых, кажется, что, имея два вложенных элемента absolute, вам нужно дать некоторую ширину, чтобы он знал, что что-то находится внутри.Когда я положил width:100% на .topbar и .nav, это позволило меню обрести форму.Но я не знаю, подходит ли ширина для вашей ситуации.

Вы можете абсолютно точно позиционировать .topbar без width и исключить absolute на обоих дочерних элементах, и это, похоже, также работает.

Я не могу дать гораздо большего решения, потому что не знаю, как именно вы хотите, чтобы оно функционировало и позиционировалось.