使用 Overflow-x:hidden 时 Firefox 中的两个垂直滚动条

Question

我刚刚为客户建立了一个网站，我遇到了一个只出现在 Firefox 浏览器中的奇怪问题。

在页面顶部，我有一个填充浏览器宽度的导航栏。我使用了此处描述的技术 http://css-tricks.com/full-browser-width-bars/< /a> 尽可能在语义上达到效果。然后我必须在 html 和 body 标签上放置overflow-x:hidden，以防止用户滚动到屏幕右侧。

这在我测试过的所有浏览器中都表现良好，包括 Mac/PC 上的 Safari、Opera、Chrome，但即使是 IE7、8 和 IE7、8 也同样如此。 9想玩得好。但哦，不，Firefox 只是不想接受它。

虽然我没有水平滚动条（这是理想的效果），但 Firefox 决定将垂直滚动条的数量增加一倍。如果使用鼠标，我无法水平滚动，但当我在 Mac 上使用触控板时，垂直移动受到限制，这意味着我无法向下滚动页面，如果我用两根手指滑动，页面就会水平滚动到遗忘状态。

我在谷歌和其他地方发现的唯一的事情是这种行为是 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%;
}

Answer 1

刚刚出现了类似的问题；我的解决方案是简单地添加：

html, body {height:100%;}

这样就解决了问题。只是想将其发布在这里，因为它不断出现在搜索结果中。

Answer 2

好的，我已经解决了。与我更好的判断相反，我只是从网络上的任何旧网站复制并粘贴了一个clearfix hack。经过几个小时的故障排除后，我发现这一切都归咎于clearfix，全角条没有按预期工作。我将其范围缩小到clearfix hack的css内容标签。由于某种原因，它有一个“.”。作为内容插入。我删除了它，然后添加

* html .clearfix { height: 1%; }

到clearfix css 块的末尾，它就工作了。 Firefox 中不再有水平滚动条，也不再有 x2 垂直滚动条。

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 {
}