Bagaimana untuk Membetulkan Limpahan: Pepijat Tersembunyi dalam Elemen Induk/Kanak-Kanak Tetap?

Limpahan: Pepijat Tersembunyi dalam Elemen Induk/Kanak Tetap

Apabila menetapkan limpahan: tersembunyi pada elemen induk tetap, sebarang elemen anak di dalamnya mungkin kelihatan di luar sempadannya. Ini berlaku disebabkan oleh cara kedudukan tetap dikendalikan dalam kebanyakan penyemak imbas.

Untuk menangani isu ini, anda boleh menggunakan sifat klip CSS:

.parent {
  position: fixed;
  overflow: hidden;
  width: 300px;
  height: 300px;
  background: #555;
  clip: rect(0px, 300px, 300px, 0px); /* Clip the parent to its own dimensions */
}

Dengan menetapkan sifat klip pada induk elemen, anda mentakrifkan kawasan segi empat tepat yang mengehadkan bahagian unsur yang boleh dilihat dan bahagiannya kanak-kanak.

Pertimbangan:

• Elakkan menggunakan kedudukan statik atau relatif untuk elemen induk. Pertimbangkan untuk menggunakan induk dengan kedudukan mutlak dalam bekas yang agak kedudukannya.
• Peratusan tidak disokong untuk koordinat klip. Gunakan auto untuk mewakili 100%.
• Kedudukan elemen kanak-kanak dan transformasi CSS3 (cth., skala) mungkin terhad dalam penyemak imbas tertentu (cth., IE11 & Chrome34).

Untuk meningkatkan keserasian , pertimbangkan untuk menambah gaya berikut kepada kanak-kanak itu elemen:

-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;

Keserasian Pelayar:

• IE8: Menu dipaparkan tetapi pautan tidak boleh diklik
• IE9: Menu tidak kelihatan jika sebahagiannya di bawah lipatan
• iOS Safari <5: Menu tidak dipaparkan dengan betul
• iOS Safari 5 : Kandungan terpotong boleh dicat semula pada skrol
• FF (13 ), IE10 , Chrome, Chrome untuk Android: Secara umumnya berkelakuan seperti yang diharapkan

Nota bahawa pendekatan ini mungkin tidak disokong sepenuhnya oleh pelayar lama atau mudah alih.

Atas ialah kandungan terperinci Bagaimana untuk Membetulkan Limpahan: Pepijat Tersembunyi dalam Elemen Induk/Kanak-Kanak Tetap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!