Две вертикальные полосы прокрутки в Firefox при использовании overflow-x: скрыто

Question

Я только что создал веб-сайт для клиента, и у меня возникла странная проблема, которая возникает только в браузере Firefox.

В верхней части страницы у меня есть панель навигации, которая заполняет ширину браузера. Я использовал описанную здесь технику http://css -tricks.com / full-browser-width-bars / , чтобы добиться эффекта как можно более семантически. Затем мне пришлось поместить overflow-x: hidden в теги html и body, чтобы пользователь не смог прокрутить правую часть экрана.

Это прекрасно работает в любом браузере, в котором я тестировал его в Safari на Mac / PC, Opera, Chrome и райском запрете, но даже IE7, 8 и 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

ОК, я разобрался.Вопреки моему здравому смыслу, я просто скопировал и вставил хакерский код с любого старого сайта в сети.После многих часов поиска и устранения неисправностей я обнаружил, что все сводится к четкому исправлению того, что полоса полной ширины не работает должным образом.Я сузил его до тега css content хака «clearfix».По какой-то причине у него было «.»вставляется как контент.Я удалил это и затем добавил

* html .clearfix { height: 1%; }

в конец блока css clearfix, и это сработало.Больше нет горизонтальной прокрутки, нет больше вертикальных полос прокрутки x2 в Firefox.