仅限Firefox：左/右箭头移动整个页面

Question

这是我的网站仅在Firefox上发生的奇怪问题。使用鼠标滚动，我只能上下移动。这是预期的行为。但是，如果我使用箭头，我可以将整个页面向右移动，看起来像是〜40px的增量。这会在浏览器窗口的右边缘创建一个空白块。我也可以将它向左移动，直到页面处于正确位置（但没有进一步 - 也就是说，我不能在左边创建一个白色块）。

我不希望左右箭头像这样移动页面......它发生在我所有网站的页面上（甚至是绝对定位的页面）。它只发生在Firefox（49.0.1）中。

有没有人对我有任何线索？感谢。

Answer 1

好的我明白了。我在overflow-x: hidden元素上放了body来处理身体的任何水平溢出。事实证明，这在Firefox中的工作方式与其他浏览器不同。在Firefox中，它通过箭头键赢得了水平滚动。

为了更好地解决问题，请考虑首先找到有问题的元素。正如@JordanBarber上面提到的，你可以在你的CSS中添加* { border: 1px solid red;}来查看哪个元素可能溢出。您也可以在这里尝试Chris Coyier的推荐

https://css-tricks.com/findingfixing-unintended-body-overflow/

对于我的情况，这些技术中没有一种出现任何违规元素。我可以通过将overflow: hidden从body元素移到我的.header元素来解决我的问题。我将继续调查标题中的元素以查看其麻烦的原因，但与此同时，从overflow-x: hidden删除body并将其添加到.header修复程序我的问题。

Answer 2

打开chrome dev工具（CMD + Shift + C），或者也可以在Firefox检查器中执行此操作。确保您位于“元素”标签上。在右侧窗口（CSS窗口）中，确保选中“样式”选项卡。单击小的“加号”符号以添加新的样式声明。自动目标将添加到新的css声明中，删除此目标并通过将其更改为*来定位页面上的所有内容。添加此css规则：border：1px纯红色，使您添加的规则如下：

    * {
      border: 1px solid red;
   }

这将为页面上的所有元素添加1px红色边框。保持开发工具处于打开状态，并用箭头移动页面。无论导致溢出问题的是什么，都会有一个红色边框延伸到多余的空白区域。将鼠标悬停在“元素”标签中的元素上可查看导致问题的原因。然后，您需要调整该元素的CSS以解决问题。