为什么我们的网站允许在移动屏幕上水平滚动？

Question

我已经在这里工作了3个小时，并且在我的生活中无法找到导致我们的页面（移动宽度）水平滚动的原因或原因。

我录制了一个关于我的问题的视频。我已经使用了几个小时的开发工具，我即将拔掉头发。

VIDEO

有什么想法？它是一个新闻网站。

您也可以使用实际的 Website 进行自我测试。

谢谢你！

Answer 1

花了几分钟删除Chrome开发工具中的元素，直到找到导致移动设备水平滚动的元素：它是页脚中带有信用卡徽标的图片（.cc-reference）。它位于margin-left: 50%;和left: -140px之间，由于相对定位推动了50％的空间，因此有点黑客并创造了额外的空间。

更新样式，以便修复它。

在：

@media screen and (max-width: 550px)
    .cc-reference {
        float: none;
        margin-left: 50%;
        left: -140px;
        position: relative;
        margin-top: -8px;
    }
}

更改为：

@media screen and (max-width: 550px)
    .cc-reference {
        float: none;
        display: block; /* making it block level allows you to... */
        margin: -8px auto 0; /* center automatically */
    }
}

Answer 2

将注意力集中在埋藏在#bottom-footer深处的这张图片上。

在移动视图中，当我删除图像时，水平滚动消失了。

您的图片相对定位并且left: -140px。

@media screen and (max-width: 550px)
.cc-reference {
    float: none;
    margin-left: 50%;
    left: -140px;
    position: relative;
    margin-top: -8px;
}

与绝对定位的元素不同，相对定位的元素保持其原始空间（即，它们不会从文档流中移除）。因此，您需要向图像元素添加140px宽度，从而导致水平滚动。

我以前见过这个，并在这里写了一个更详细的答案（附有行为说明）：

• Why are horizontal scroll bars shown on my website?