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

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

在页面顶部，我有一个导航栏，可以填充浏览器的宽度。我使用了这里描述的技术，以尽可能在语义上达到效果。然后我不得不在html和body标签上放置overflow-x:hidden，以防止用户从屏幕右侧滚动

我在Mac/PC上的Safari、Opera、Chrome和天堂禁止上测试过它，它在每一款浏览器中都非常有效，但即使是IE7、IE8和IE9也希望玩得更好。但是，哦，不，Firefox只是不想跟它走

虽然我没有想要的水平滚动条效果，但Firefox决定将垂直滚动条的数量增加一倍。如果使用鼠标，我不能水平滚动，但是当我在Mac上使用触控板时，垂直移动受到限制，这意味着我不能向下滚动页面，如果我用两个手指滑动页面，页面就会水平滚动消失

我在谷歌和其他地方发现的唯一一件事是，这种行为是Firefox中的一个bug

非常感谢您的帮助，非常感谢

更新：添加代码

基本上，代码是这样的，因为有太多的东西都显示出来了。我会指给你看这个网站，但客户还不想让它上线。我们开始：

<nav id="menu">
    <ul>
        <li>Menu Item 1</li>
        <li>Menu Item 2</li>
        <li>Menu Item 3</li>
    </ul>
</nav>

---

好的，我把它整理好了。与我更好的判断相反，我只是从网络上的任何旧站点复制并粘贴了一个clearfix黑客。经过数小时的故障排除，我发现全宽条没有按预期工作完全是由于clearfix造成的。我把它缩小到clearfix黑客的css内容标签。出于某种原因，它插入了一个“.”作为内容。我删除了这个，然后添加了

* html .clearfix { height: 1%; }

---

在clearfix css块的末尾，它成功了。Firefox中不再有水平滚动，也不再有x2垂直滚动条。

刚刚出现了一个类似的问题；我的解决办法是简单地加上：

html, body {height:100%;}

---

这就解决了问题。我只是想把它贴在这里，因为搜索结果中经常会出现这个问题。

对我来说，解决这个问题的方法是将滚动条代码改为html，而不是“body，html”。我想它可能会制作两个滚动条，因为它同时包含html和正文。尽管这带来了一些其他问题。我想我会加一个div

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

---

这并没有为我解决问题。这也没有为我解决问题：（将其放入clearfix css块对我没有帮助。我删除了

html{overflow-y:scroll；}

，它修复了双栏问题，但我想知道删除它是否会导致其他问题？

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