当使用overflow-x：hidden时，Firefox中的两个垂直滚动条 [英] Two vertical scrollbars in Firefox when using overflow-x:hidden

问题描述

Ive刚刚为客户端创建了一个网站，而且有一个奇怪的问题，只发生在Firefox浏览器。

Ive just built a website for a client, and Ive got an odd problem that only occurs in Firefox browser.

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

At the top of the page I have a navigation bar that fills the width of the browser. Ive used the technique described here http://css-tricks.com/full-browser-width-bars/ to achieve the effect as semantically as possible. Then Ive had to place overflow-x:hidden on the html and body tags to prevent the user from being able to scroll off the right side of the screen.

这在我在Mac / PC，Opera，Chrome和Safari上的Safari中测试过的每个浏览器都很好用，但即使是IE7，8& 9想玩好。但是没有Firefox只是不想与它一起去。

This works great in every browser I've tested it in from Safari on Mac/PC, Opera, Chrome and heaven forbid, but even IE7, 8 & 9 wanted to play nice. But oh no Firefox just doesn't want to go along with it.

虽然Ive没有水平滚动条，这是所需的效果，Firefox已经决定加倍垂直滚动条的数量。如果使用鼠标，我无法水平滚动，但当我在Mac上使用触控板时，垂直移动受到限制，这意味着我不能向下滚动页面，如果我做一个双指滑动页面水平滚动忘记。

Although Ive no horizontal scroll bars which is the desired effect, Firefox has decided to double up on the amount of vertical scrollbars. I can't scroll horizontally if using a mouse, but when I use the trackpad on the Mac, the vertical movement is restricted, meaning I cant scroll down the page and if I do a two finger swipe the page scrolls off horizontally into oblivion.

我在google和其他地方发现的唯一的事情是，这种行为是Firefox中的一个错误？

The only thing I have found on google and elsewhere is that this behaviour is a bug in Firefox?

更新：添加代码

Any help with this annoyance is greatly appreciated, Many Thanks.

非常感谢您对此烦恼的任何帮助。 / strong>

Update: Added Code

基本上代码是这样的，因为太多了。我会指向你的网站，但客户端不想要它的活。我们去：

Basically the code is this as theres too much show it all. I would point you to the site but the client doesn't want it live yet. Here we go:

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

然后css是全宽浏览器栏的链接：

Then the css is this for a fullwidth browser bar as the link above:

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

推荐答案

。根据我更好的判断，我只是从网上的任何旧站点复制和粘贴了一个clearfix的攻击。经过多个小时的故障排除，Ive发现，这一切都是为了clearfix全宽栏不能正常工作。我把它缩小到clearfix黑客的css内容标签。由于某种原因，它插入了一个'。'作为内容。我删除了这个，然后添加了

OK, I sorted it out. Against my better judgement, I just copied and pasted a clearfix hack from any old site on the net. After many hours troubleshooting, Ive found that it was all down to clearfix that the fullwidth bars weren't working as expected. I narrowed it down to the css content tag of the clearfix hack. For some reason it had had a '.' inserted as the content. I removed this and then added

* html .clearfix { height: 1%; }

到clearfix css块的末尾，它工作。在Firefox中没有更多的水平滚动，没有更多的x2垂直滚动条。

onto the end of the clearfix css block and it worked. No more horizontal scrolling, no more x2 vertical scrollbars in Firefox.

这篇关于当使用overflow-x：hidden时，Firefox中的两个垂直滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！