首頁 >web前端 >css教學 >為什麼我的行動瀏覽器顯示內容溢出,即使正文上有「overflow-x:hidden」?

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

Patricia Arquette
Patricia Arquette原創
2024-12-14 14:26:15676瀏覽

Why Does My Mobile Browser Show Content Overflow Even with `overflow-x: hidden` on the Body?

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

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

解決方案

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

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

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

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

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

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

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn