谷歌瀏覽器奇怪的溢出，如何解決它？

Question

只有在頁面中進行選擇並將鼠標移動到右側時，纔會發生這種情況。你能幫我嗎？請看附圖。

Answer 1

爲了讓我們幫助您，您應該張貼代碼片段而不是指向您網站的鏈接。這違反了規則，因爲@哈里表示要做其他事情。

也就是說，我認爲這個問題來自於您在網站上使用彈性寬度的事實。請記住，當你這樣做時，你需要像在一些瀏覽器中一樣觀察你的填充，它們將寬度擴大到最大屏幕尺寸以外。

我認爲你的問題來了約你有：

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 - > Inspect Element工具。將鼠標懸停在您的<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%; 
}