Mengapa div kedudukan tetap dengan tag UL hilang dalam Chrome dan Opera?

Isu Paparan Chrome dan Opera dengan Kedudukan Tetap dan Teg UL

Konfigurasi tertentu dalam kod HTML boleh menyebabkan isu pemaparan dalam Google Chrome dan Opera. Apabila div kedudukan tetap termasuk < UL > tag, div boleh hilang seketika apabila mengklik pautan sauh. Masalah ini timbul disebabkan oleh isu dalaman dalam enjin pemaparan Chrome.

Penyelesaian Chrome

Dalam Chrome, isu itu boleh diselesaikan dengan menambahkan -webkit-transform: translateZ( 0) kepada gaya CSS untuk div kedudukan tetap:

#sidebar {
  -webkit-transform: translateZ(0); /* Fix for Chrome rendering issue */
}

Teknik ini memaksa Chrome untuk melakukan transformasi 3D pada div, yang nampaknya menangani masalah pemaparan yang mendasari.

Penyelesaian Opera

Pengendalian isu Opera berbeza daripada Chrome. Untuk menyelesaikan masalah dalam Opera, memerlukan pengecatan semula secara berterusan pada harta yang berpotensi menjejaskan reka letak, tetapi dalam amalan tidak mempunyai kesan. Dalam kes ini, margin-bottom digunakan kerana ia tidak mungkin mengganggu reka letak halaman:

@keyframes noop {
  0%   { margin-bottom: 0; }
  100% { margin-bottom: 1em; }
}

#sidebar {
  animation: noop 1s infinite;
}

Kod ini memastikan Opera terus mengecat semula margin-bawah bar sisi, memaksanya mengekalkan kedudukan tetapnya. Walaupun penyelesaian ini tidak sempurna sepenuhnya, ia meminimumkan kelipan dan memulihkan tingkah laku yang dimaksudkan.

Adalah penting untuk ambil perhatian bahawa penyelesaian Opera bukanlah pembetulan universal dan mungkin memerlukan pelarasan berdasarkan keperluan kedudukan tertentu bagi elemen berkenaan. Jika anda menghadapi masalah ini, cuba ubah suai CSS yang dicadangkan untuk memenuhi keperluan anda.

Atas ialah kandungan terperinci Mengapa div kedudukan tetap dengan tag UL hilang dalam Chrome dan Opera?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!