我刚为客户建立了一个网站,但在Firefox浏览器中出现了奇怪的问题。页面顶部有一个导航栏,它填满了浏览器的宽度。我使用了这里描述的技术http://css-tricks.com/full-browser-width-bars/尽可能地实现语义效果。然后我不得不在html和body标签上放置overflow-x:hidden,以防止用户能够滚动到屏幕的右侧。
这在我测试过的每个浏览器中都非常好用,包括Mac / PC上的Safari,Opera,Chrome,甚至是IE7, 8和9都很友好。但哦,不行,Firefox就是不想让它正常工作。
虽然我没有水平滚动条,这是期望的效果,但Firefox却决定加倍垂直滚动条的数量。如果使用鼠标,我无法水平滚动,但当我在Mac上使用触摸板时,垂直移动受限制,这意味着我无法向下滚动页面,如果我做两个手指的向下滑动,则页面会被水平滚动到不可见区域。
我在Google和其他地方发现的唯一一件事是,这种行为是Firefox的一个错误?
非常感谢任何对这个问题的帮助。
这在我测试过的每个浏览器中都非常好用,包括Mac / PC上的Safari,Opera,Chrome,甚至是IE7, 8和9都很友好。但哦,不行,Firefox就是不想让它正常工作。
虽然我没有水平滚动条,这是期望的效果,但Firefox却决定加倍垂直滚动条的数量。如果使用鼠标,我无法水平滚动,但当我在Mac上使用触摸板时,垂直移动受限制,这意味着我无法向下滚动页面,如果我做两个手指的向下滑动,则页面会被水平滚动到不可见区域。
我在Google和其他地方发现的唯一一件事是,这种行为是Firefox的一个错误?
非常感谢任何对这个问题的帮助。
<nav id="menu">
<ul>
<li>Menu Item 1</li>
<li>Menu Item 2</li>
<li>Menu Item 3</li>
</ul>
</nav>
然后,针对完整宽度的浏览器栏,CSS就像上面的链接一样:
html,body{
overflow-x: hidden; /*This prevents the user from scrolling horizontally*/
}
#menu{
position: relative;
background: blue;
}
#menu:before, #menu:after{
content:'';
position: absolute;
background: inherit;
top: 0;
bottom: 0;
width: 9999px; /*huge width to ensure bar fills browser*/
}
#menu:before{
right: 100%;
}
#menu:after{
left: 100%;
}