位置固定的顶级导航栏在firefox中表现奇怪

Question

我正在开发一个使用http://startbootstrap.com/template-overviews/simple-sidebar/的项目......我们有一个带

的导航栏

position:fixed

并向右浮动搜索框。在firefox中，50％的搜索框延伸到div旁边。似乎在镀铬中完美地工作，当宽度减小时，侧边栏会自动折叠等。 我知道位置固定的元素不遵循常规流程。不确定如何解决这个问题。

这是一个小提琴的链接

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

这里的任何帮助将不胜感激。

由于

Answer 1

试试这个......

  add overflow:hidden; to #sidebar-wrapper

查看@ http://jsfiddle.net/avouaLzo/2/

更多建议，请回复

Answer 2

尝试使用此代码：

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

工作演示 - JSfiddle

这解决了两个浏览器中的问题。当然可以根据需要声明width属性，这是唯一的例子。

Answer 3

我尝试了什么：删除#wrapper的宽度，移除#wrapper.toggled #page-content-wrapper的绝对定位并为搜索框设置最小宽度。

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

现在侧边栏似乎像以前一样扩展，内容使用可用空间而不会移出窗口，导航栏也会调整大小。搜索框本身缩小到最小值。这大致是你的预期吗？

如果您将黄色条作为真实导航，我建议不使用position导航元素的流畅解决方案。也许搜索框也适合该布局。