Walaupun kemajuan dalam pembangunan web, isu keserasian tertentu boleh timbul apabila menggunakan ciri CSS merentas penyemak imbas yang berbeza. Dalam kes ini, isu ini berkaitan dengan menggunakan sifat kedudukan melekat dalam Internet Explorer (IE) 11.
Masalah:
Kod HTML yang disediakan mengandungi div dengan kelas "sticky-button-thing-not-working-on-ie" yang merangkumi butang. Objektifnya adalah untuk menjadikan div ini melekit, memastikan butang kekal di bahagian bawah skrin semasa pengguna menatal. Walau bagaimanapun, tingkah laku ini tidak berlaku dalam IE 11.
Sebab:
Sifat kedudukan melekit, yang diperkenalkan dalam pelayar moden, membolehkan elemen kekal dalam kedudukan semasa mereka sementara menatal, menjadikannya mudah untuk pengguna mengakses kandungan penting. Malangnya, IE 11 tidak menyokong sifat ini secara asli.
Penyelesaian:
Untuk mencapai tingkah laku yang dimaksudkan dalam IE 11, pendekatan alternatif ialah menggunakan sifat kedudukan tetap . Tidak seperti melekit, elemen tetap mengekalkan kedudukan malar berbanding port pandangan, tanpa mengira menatal. Dengan menggabungkan tetap dengan beberapa pelarasan CSS lain, adalah mungkin untuk meniru gelagat melekit yang diingini, memastikan butang kekal di bahagian bawah skrin dalam kedua-dua IE 11 dan pelayar moden yang lain.
Diubah suai Kod:
.sticky-button-thing-not-working-on-ie { position: fixed; /* added to support older browsers */ position: sticky; bottom: 0; right: 0; background: rgba(0, 211, 211, 0.6); }
Nota: Sifat melekit boleh dialih keluar dengan selamat daripada kod kerana ia tidak digunakan mengikut cara yang dimaksudkan. Dibetulkan, sebaliknya, menyediakan fungsi yang diingini untuk penyemak imbas yang lebih lama.
Maklumat Tambahan:
Atas ialah kandungan terperinci Mengapa butang melekit saya tidak berfungsi dalam IE 11?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!