為什麼我的行動瀏覽器顯示內容溢出，即使正文上有「overflow-x:hidden」？

行動瀏覽器中的內容溢出，帶有「overflow-x:hidden」

儘管為body 元素設定了「overflow- x:hidden」 ，使用者在行動瀏覽器中遇到內容溢位。選單列超出了頁面的寬度，在右側留下了空白。

解決方案

要解決此問題，請建立一個包裝器

內部元素並將「overflow-x：hidden」屬性應用於包裝器。這有效地隱藏了行動瀏覽器中的多餘內容。

要注意的是，某些瀏覽器可能會忽略套用於 的溢位屬性。和使用「meta name='viewport'」標籤指定視窗時的標籤。因此，直接將「overflow-x:hidden」應用於 body 元素可能還不夠。

此外，將「position:relative」新增至包裝器

中建議確保在行動瀏覽器中正確顯示。透過將溢位包含在包裝器內，可以維持 1100px 視口，並有效地截斷內容。

以上是為什麼我的行動瀏覽器顯示內容溢出，即使正文上有「overflow-x:hidden」？的詳細內容。更多資訊請關注PHP中文網其他相關文章！