html - 溢出-x :hidden; in Chrome & Firefox 的问题

Question

我在使用 overflow-x:hidden 时遇到问题。我知道有很多关于这个主题的帖子，但没有一个完全专门解决我的问题，而且已经发布的问题的解决方案都没有奏效。所以，我又发布了另一个“溢出:隐藏；”问题...

我的页面顶部有一个全宽(固定)导航栏和一个全屏幻灯片。其余内容以非常直接的方式进行(或者我认为)。页面上的其他地方有固定元素，我将正文设置为 overflow-x:hidden; 以防止在调整页面大小时出现尴尬的重叠。

问题是，在 Chrome 和 Firefox 中，我仍然可以使用触控板滚动 L 和 R。不好。

我重建了我的页面，并花费了大量时间使用开发人员工具，隐藏、删除和更改各种元素的位置。我尝试将 overflow-x:hidden; 添加到我的 .wrapper;这工作正常，但仍然允许一定数量的横向滚动。我也尝试过设置 scrollLeft(0)，正如这篇文章 here 中所建议的那样.我无法弄明白:

A) 为什么 overflow-x 不工作，以及

B) 我溢出的内容来自哪里(乍一看和开发工具，一切似乎都包含得很好)。

由于我不确定究竟是什么导致了这个问题，所以我无法包含简洁的 JSFiddle 代码段。完整(静态)站点在这里:[已编辑，不再需要]

Answer 1

您将不得不使用盒模型重建您的页面，使用 css 类或库来实现良好的网格系统。固定元素从来都不是一个好的选择。可以根据 min-width 和 max-width 使用 css 中的媒体查询为移动应用定制提到的 boxmodel 网格。