頂部導航欄固定在Firefox

Question

我對使用http://startbootstrap.com/template-overviews/simple-sidebar/一個項目工作古怪行爲......我們有

position:fixed 

導航欄和搜索框右邊浮動。在Firefox中，該搜索框的50％擴展到div封閉外。似乎在Chrome中完美工作，邊欄在寬度減小時自動崩潰等。 我知道固定位置的元素不遵循常規流程。不知道如何解決這個問題。

這裏擺弄

http://jsfiddle.net/avouaLzo/1/

這裏的任何幫助將不勝感激的鏈接。

感謝

Answer 1

嘗試使用此代碼：

#search-page input { 
    position:fixed; 
    right:0px; 
    width:15%; 
} 

工作演示 - JSfiddle

這解決了這兩個瀏覽器中的問題。當然，你可以聲明width屬性，這是它唯一的例子。

Answer 2

試試這個...

add overflow:hidden; to #sidebar-wrapper 

檢查出來@http://jsfiddle.net/avouaLzo/2/

更多的意見，請發表評論回到

Answer 3

我試過了：刪除#wrapper的寬度，刪除#wrapper.toggled #page-content-wrapper的絕對位置並設置搜索框的最小寬度。

http://jsfiddle.net/avouaLzo/5/

現在側邊欄似乎之前擴大，內容使用的可用空間無需移動窗外，你的導航欄調整了。搜索框本身縮小到最小值。這大致是你所期望的嗎？

如果您將黃色條作爲真實導航，我會建議一個導航元素的流體解決方案，而不需要position。也許搜索框也可以適應該佈局。