Переполнение контейнера, отлично в Chrome, странно в IE / FF

Question

У меня проблемы с горизонтальными полосами прокрутки на моем контейнере в IE и FF, но в Chrome все нормально.

Сайт имеет ширину 1200px, в Chrome, когда окно браузера ниже 1200px, вы получаете горизонтальную полосу прокрутки, как и ожидалось, но в IE и FF есть горизонтальная полоса прокрутки, даже если окно превышает 1200px, которое прокручивается до пустого пространства .

Я не хочу устанавливать переполнение скрытым, поскольку тогда не было бы прокрутки вообще. Существует фиксированный заголовок, который может быть проблемой, но он все еще сохраняется даже после того, как заголовок стал абсолютным.

Я думаю, вместо того, чтобы публиковать фрагменты кода с полного сайта, я должен просто дать ссылку на рассматриваемый сайт?

http://www.ekmpowershop21.com/ekmps/shops/collective_ret/index.asp

Если бы кто-то мог пролить свет на эту проблему, это было бы фантастически. Это больше раздражает, чем что-либо еще, но все же хотел бы исправить мою ошибку, если это возможно.

Редактировать: Нашел решение, см. Ответы

Answer 1

overflow:hidden; обрезает содержимое. Однако, если содержимое не умещается на экране, будет, конечно, прокрутка. Переполнение просто обрезает содержимое в соответствии с размерами контейнера. Просто попробуйте, и вы увидите, что это работает. Я только что проверил на Firefox (Mac).

UPDATE

Обычно, если что-то подобное происходит в IE / FF, это связано с ошибкой блочной модели. Просто добавьте

-webkit-box-sizing: border-box; /* content-box */
-moz-box-sizing: border-box;
box-sizing: border-box;

к вашему классу переноса, и вам не нужно будет устанавливать переполнение.

Answer 2

Не уверен, что это самое элегантное решение, но я только что применил overflow-x: hidden; к своему контейнеру, и, похоже, это устранило проблему в IE и FF.Интересно, зачем это нужно, когда с Chrome все в порядке, без него.

Тем не менее, я все равно буду благодарен за любое объяснение, так как не знаю причину, по которой мое решение работает, спасибо.