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

Question

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

Answer 1

为了让我们能够帮助您，您应该将代码片段而不是 link 发布到您的网站。这是违反规则的，因为 @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; 正在扩展由 .module 设置的 width: 100%; 以实质上溢出您的容器。

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

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

Answer 2

您可以将 body 的宽度设置为 100% 并使用 overflow: hidden。

 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%;
 }

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

Strange overflow in Google Chrome, How to fix it?

html

css

html5-canvas