Question

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

在页面顶部，我有一个填充浏览器宽度的导航栏。我已经使用了这里描述的技术http://css-tricks.com/full-browser-width-bars/来尽可能地在语义上实现效果。然后我不得不将overflow-x：隐藏在html和body标签上，以防止用户滚动屏幕右侧。

这在我从Mac / PC上的Safari，Opera，Chrome和天堂禁止的所有浏览器中都很有效，但即使是IE7,8＆amp; 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%;
}

Answer 1

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

html, body {height:100%;}

这解决了它。只是想在这里发布它，因为这会在搜索结果中不断出现。

Answer 2

好的，我把它整理出来了。反对我更好的判断，我只是复制并粘贴了网上任何旧网站的clearfix hack。经过几个小时的故障排除后，我发现全部条款都没有按预期工作。我把它缩小到了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 {
}

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

3 个答案: