Rumah > hujung hadapan web > tutorial css > Mengapa `overflow-x: hidden` Tidak Berfungsi pada Penyemak Imbas Mudah Alih dan Bagaimana Saya Boleh Membetulkannya?

Mengapa `overflow-x: hidden` Tidak Berfungsi pada Penyemak Imbas Mudah Alih dan Bagaimana Saya Boleh Membetulkannya?

DDD
Lepaskan: 2024-12-29 01:31:10
asal
457 orang telah melayarinya

Why Doesn't `overflow-x: hidden` Work on Mobile Browsers, and How Can I Fix It?

Overflow-x:hidden Tidak Mengekang Kandungan pada Penyemak Imbas Mudah Alih

Apabila melaksanakan atribut gaya overflow-x:hidden untuk menyekat kandungan kepada lebar port pandangan, anda mungkin menghadapi gelagat limpahan yang tidak dijangka pada penyemak imbas mudah alih. Berikut ialah pecahan isu dan penyelesaiannya.

Penerangan Masalah:

Walaupun menetapkan overflow-x:hidden pada badan atau teg html, penyemak imbas mudah alih memaparkan kandungan melebihi lebar ruang pandang yang ditentukan, menghasilkan ruang putih di sebelah kanan halaman.

Sebab:

Telah diperhatikan bahawa penyemak imbas mudah alih sering mengabaikan overflow-x:hidden apabila digunakan pada elemen html dan badan. Sebaliknya, mereka kelihatan mengabaikan atribut ini apabila menghuraikan teg meta port pandang.

Penyelesaian:

Untuk menyelesaikan isu ini, buat div pembalut dalam teg badan dan tetapkan gaya limpahan-x:hidden kepada itu pembalut bukannya badan atau html.

Pertimbangkan contoh kod berikut:

<body>
    <div>
Salin selepas log masuk
#wrapper {
    overflow-x: hidden;
}
Salin selepas log masuk

Nota Tambahan:

Dalam sesetengah kes, anda juga mungkin perlu tambah kedudukan: relatif kepada div pembalut untuk memastikan susun atur yang betul.

Dengan menggunakan overflow-x:hidden pada elemen pembalut, anda mengasingkan kandungan dalam div itu dengan berkesan daripada had penyemak imbas mudah alih pada elemen html dan badan. Ini membolehkan anda mengekang kandungan kepada lebar port pandangan yang diingini, menghapuskan sebarang ruang kosong yang tidak diingini di sebelah kanan.

Atas ialah kandungan terperinci Mengapa `overflow-x: hidden` Tidak Berfungsi pada Penyemak Imbas Mudah Alih dan Bagaimana Saya Boleh Membetulkannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan