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

Question

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

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

这在我从 Mac/PC 上的 Safari、Opera、Chrome 和天堂禁止的每个浏览器中测试它时都很好用，但即使是 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%;}

然后就解决了。只是想把它贴在这里，因为它不断出现在搜索结果中。