Dwa pionowe paski przewijania w przeglądarce Firefox przy korzystaniu z overflow-x: hidden

Question

Właśnie zbudowałem stronę internetową dla klienta i mam dziwny problem, który występuje tylko w przeglądarce Firefox.

U góry strony Mam pasek nawigacyjny, który wypełnia szerokość przeglądarki. Użyłem techniki opisanej tutaj, aby osiągnąć efekt tak semantycznie jak to tylko możliwe. Następnie musiałem umieścić overflow-x: ukryty na znacznikach HTML i body, aby uniemożliwić użytkownikowi przewijanie z prawej strony ekranu.

Działa to znakomicie w każdej przeglądarce, w której testowałem to z Safari na Macu/PC, Opera, Chrome i niebie, ale nawet IE7, 8 & 9 chciało grać ładnie. Ale och, Firefox po prostu nie chce się z tym pogodzić.

Mimo że nie ma poziomych pasków przewijania, które są pożądanym efektem, Firefox postanowił podwoić liczbę pionowych pasków przewijania. Nie mogę przewijać w poziomie, jeśli używam myszy, ale kiedy używam gładzika na Macu, ruch w pionie jest ograniczony, co oznacza, że ​​nie mogę przewinąć strony, a jeśli wykonam dwukrotne przesunięcie palcem, strona przewinie się w poziomie do zapomnienia.

Jedyną rzeczą, którą znalazłem w Google i gdzie indziej jest to, że to zachowanie jest błędem w Firefoksie?

Każda pomoc w tej irytacji jest bardzo cenna, Wielkie dzięki.

Aktualizacja: Kod Dodany

Zasadniczo kod jest to jak tam zbyt wiele pokazać go wszystkim. Chciałbym wskazać ci stronę, ale klient nie chce jej jeszcze na żywo. Zaczynamy:

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

Następnie css jest to dla pełnej szerokości paska przeglądarki jako linku powyżej:

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

Ok, ja to załatwili. Wbrew mojej lepszej ocenie po prostu skopiowałem i wkleiłem poprawioną wersję ze starej witryny w sieci. Po wielu godzinach rozwiązywania problemów, Ive odkrył, że wszystko sprowadzało się do tego, że paski o pełnej szerokości nie działały zgodnie z oczekiwaniami. Zawęziłem go do znacznika zawartości css w haśle clearfix. Z jakiegoś powodu miał "." wstawione jako treść. Usunąłem to, a następnie dodałemna końcu bloku css cleanfix i działało. Koniec z przewijaniem w poziomie, bez przewijania x2 w Firefoksie.

Answer 2

Po prostu pojawił się podobny problem; moim rozwiązaniem było po prostu dodać:

html, body {height:100%;} 

I to rozwiązało. Po prostu chciałem go opublikować tutaj, bo to ciągle pojawiały się w wynikach wyszukiwania.