為什麼「overflow-x:hidden」在行動瀏覽器上不起作用，如何修復它？

Overflow-x:hidden 不限制行動瀏覽器上的內容

實作overflow-x:hidden 樣式屬性以將內容限制為視口寬度，您可能會在行動瀏覽器上遇到意外的溢位行為。以下是問題分析及解決方案。

問題描述：

儘管在 body 或 html 標籤上設定了Overflow-x:hidden，但行動瀏覽器顯示的內容超出指定的視窗寬度，導致右側出現空白

原因：

據觀察，移動瀏覽器在應用於html 和body 元素時經常忽略overflow-x:hidden。相反，它們在解析視口元標記時似乎忽略了這些屬性。

解決方案：

要解決此問題，請在body 標記內建立一個包裝器div 並分配Overflow-x:hidden 樣式為that包裝器而不是正文或html.

考慮以下程式碼範例：

    <div>
<pre class="brush:php;toolbar:false">#wrapper {
    overflow-x: hidden;
}

附加說明：

在某些情況下，您可能還需要新增position:相對於包裝器div以確保正確的佈局。

透過應用將overflow-x:hidden 加入到包裝元素中，可以有效地將div 中的內容與行動瀏覽器對html 和body 元素的限制隔離開來。這允許您將內容限制為所需的視窗寬度，消除右側任何不必要的空白。