在Firefox中使用overflow-x:hidden时出现两个垂直滚动条

Question

我刚为客户建立了一个网站，但在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的一个错误？

非常感谢任何对这个问题的帮助。

<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%;
}

- Martin Harvey

Answer 1

我最近遇到了一个类似的问题，我的解决方案是简单地添加以下内容：

html, body {height:100%;}

这样就解决了。我只是想在这里发布一下，因为这个问题一直出现在搜索结果中。

- Jon Schroeder

---

这对我没有解决问题。 - nicholaschris

那对我也没用 :( - code-8

Answer 2

好的，我解决了。虽然我不太赞同，但我只是从网上的任何一个旧站点复制并粘贴了一个clearfix hack。经过多个小时的故障排除，我发现全宽条未按预期工作的原因都归结于clearfix。我将其缩小到clearfix hack的css content标签。由于某种原因，它插入了'.'作为内容。我删除了这个并添加了

* html .clearfix { height: 1%; }

将“clearfix” CSS 块添加到末尾，它就可以工作了。在 Firefox 中不再出现水平滚动条，也不再出现两个垂直滚动条。

- Martin Harvey

---

将这段代码放入clearfix的CSS块中对我没有帮助。我移除了html { overflow-y: scroll;}，解决了两栏问题，但我想知道是否移除它会导致其他问题？ - nicholaschris

Answer 3

对我而言解决问题的方法是将滚动条代码移到仅限于HTML而不是"body, html"。我想也许它会在HTML和body中都放置两个滚动条。虽然这引入了一些其他问题。我想我会选择使用额外的div。

html {
    overflow-y: scroll;
    scrollbar-color: #2A9FD6 rgba(0,0,0,1);
    scrollbar-width: thin;
}
body, html {
}

- Claes