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

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:

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

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.