html - Google Chrome 中出现奇怪的溢出，如何解决？

Question

仅当我在页面中进行选择并将鼠标向右移动时才会发生这种情况。你能帮我吗？请看附图。

Answer 1

为了让我们能够帮助您，您应该发布代码片段而不是指向您网站的链接。正如@Harry 所说的那样做任何其他事情都是违反规则的。

也就是说，我认为问题出在您在网站上使用 flex 宽度这一事实。请记住，执行此操作时，您需要注意填充，因为在某些浏览器中，它们会将宽度扩展到最大屏幕尺寸之外。

我认为您遇到的问题是:

article.header {
background-color: #1949CF;
padding: 3px;
padding-top: 7px;
}

加上

.module {
width: 100%;
float: left;
display: block;
clear: both;
}

两者都在您的代码开头附近被调用:

<article class="module header">

因此，padding: 3px;正在扩展 width: 100%;由 .module 设置基本上溢出你的容器。

要查看此内容，请右键单击您的网站，使用 Chrome -> 检查元素工具。将鼠标悬停在您的 <article class="module header"> 上部分，您会看到显示的宽度超出了浏览器窗口的最大宽度。

这可能不是您代码中唯一需要修复的地方，但这应该让您了解如何调试问题的正确轨道。