Firefox Problem bei der Berechnung der Breite mit CSS inline-block & absolute Positionierung? (Twitter Bootstrap Dropdown-Menü)

Question

Ich verwende die Twitter Bootstrap HTML/CSS-Framework und insbesondere die Dropdown-Menüs . Ich versuche, eine "Tastenkombination" hinzuzufügen, die in jedem Menüpunkt sichtbar und rechtsbündig ist. Die Breite des Menüs sollte sich an den Inhalt anpassen - sowohl der Name des Elements (linksbündig) als auch die Tastenkombination (rechtsbündig) mit etwas Füllung dazwischen.

Ich habe dies funktioniert, mit der Ausnahme von Firefox Rendering das Menü ohne Einbeziehung der Breite der Tastenkombination, wenn es die Breite des Menüs berechnet! (Funktioniert gut in Webkit / speziell Chrome.) Hier ist ein Screenshot illustriert, wie in Firefox die Tastaturkürzel Elemente hinter dem primären Menü Text gleiten:

Ich habe dies auf einer relativ einfachen Seite zusammengefasst, die das Problem veranschaulicht - siehe dieser jsFiddle-Link .

Ich kann Firefox korrekt rendern, wenn ich sicherstelle, dass keine DIVs, die Eltern des Menüs sind, "position: absolute;". Siehe die beiden Zeilen, die ich zum Auskommentieren im CSS markiert habe. Allerdings sehe ich nicht, warum ich nicht absolute Positionierung für die enthaltenden Blöcke verwenden kann und warum das einen Unterschied zwischen den Browsern verursachen würde.

Gibt es Hinweise darauf, wie ich dieses Problem lösen kann, ohne die absolute Positionierung der enthaltenen Blöcke zu entfernen? Danke!

Answer 1

Erstens ist es nicht sinnvoll, beide position: absolute y float auf demselben Element, da es sich um sich gegenseitig ausschließende Formen der Positionierung handelt ( absolute übersteuert float ). Je nach Ihren Bedürfnissen können Sie das eine oder das andere ausschließen. Bestimmen Sie, was für Ihre Zwecke wichtiger ist.

Zweitens hat es den Anschein, dass mit zwei absolute Divs verschachtelt müssen Sie etwas Breite geben, damit es weiß, dass etwas drin ist. Wenn ich width:100% über die .topbar y .nav konnte das Menü Gestalt annehmen. Aber ich weiß nicht, ob die Breite für Ihre Situation praktikabel ist.

Sie können durchaus die .topbar sin width und eliminieren die absolute auf beide untergeordneten Elemente und es schien auch zu funktionieren.

Ich kann Ihnen keine weitere Lösung anbieten, da ich nicht genau weiß, wie Sie die Funktion und Positionierung wünschen.