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

Question

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

Answer 1

为了让我们为您提供帮助，您应该发布代码段而不是指向您网站的链接。它反对规则，因为@Harry说要做任何其他事情。

那就是说，我认为这个问题来自于你在网站上使用弹性宽度的事实。请记住，当您执行此操作时，您需要像在某些浏览器中那样观察填充，它们会将宽度扩展到超出最大屏幕尺寸。

我认为你的问题正如你所说：

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 - ＆gt;右键单击您的网站，检查元素工具。将鼠标悬停在<article class="module header">部分上，您会看到显示的宽度超出了浏览器窗口的最大宽度。

这可能不是代码中唯一需要修复的位置，但这应该是如何调试问题的正确方法。

Answer 2

您可以使用overflow：hidden。将主体的宽度设置为100％。

 body {
 background-size: 100%;
 background-position: center 1%;
 background-repeat: no-repeat;
 font-family: "Arial Narrow", Arial;
 font-stretch: condensed;
 font-size: 0.9em;
 text-align: center;
 overflow-x: hidden;
 padding: 0;
 margin: 0;
 width: 100%;
 }