顶部导航栏固定在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。也许搜索框也可以适应该布局。