Mari kita bicara lagi tentang pemosisian tetap IE6

Penulis：Eve Cole Waktu Pembaruan：2010-11-12 15:43:53

Diketahui bahwa browser IE6, yang diproduksi pada tahun 2002 dan saat ini menjadi browser utama di negara saya, tidak mendukung atribut pemosisian statis yang ditetapkan pada CSS2. Oleh karena itu, para insinyur front-end yang bermasalah telah menemukan berbagai solusi:

1. Solusi js konvensional

Ini adalah yang tertua dan banyak digunakan. Misalnya, banyak iklan bait yang mengikuti bilah gulir menggunakan solusi ini. Kerugiannya adalah elemen bilah gulir yang diseret bergetar sangat buruk. Meskipun dapat diperbaiki melalui penghalusan, efeknya masih belum ideal. Namun yang ingin saya katakan adalah meskipun efek visual dari solusi ini sedikit lebih buruk, stabilitasnya tidak berarti apa-apa.

2. Gunakan metode simulasi struktur dan tata letak HTML

Solusi ini pernah digunakan oleh 163 Blog. 163 menempatkan semua konten dalam wadah dengan ketinggian 100% dan bilah gulir disetel ke otomatis, lalu menyetel lapisan yang diposisikan secara mutlak di bawahnya, sehingga lapisan yang diposisikan secara mutlak dapat mencapai a. keadaan statis. Prinsip: Bilah gulir yang Anda seret bukanlah seluruh halaman yang Anda seret, tetapi penampung yang menyimulasikan seluruh halaman, sehingga area di luar penampung bersifat "stasioner". terperinci:

Berikut isi kutipannya:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transisi//EN"
" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<kepala>
<gaya>
*{margin:0}
tubuh{
tinggi:1000 piksel;
lebar:1000 piksel;
}
#A{
lebar:300 piksel;
tinggi:100 piksel;
latar belakang:merah;
}
</gaya>
<skrip>
var isie6 = window.XMLHttpRequest?false:benar;
jendela.onload = fungsi(){
var a = dokumen.getElementById('a');
var d = dokumen.getElementById('d');
jika(isie6){
a.style.position = 'mutlak';

jendela.onscroll = fungsi(){
d.innerHTML = '';
}
}kalau tidak{
a.style.posisi = 'tetap';
}
a.gaya.kanan = '0';
a.gaya.bawah = '0';
}
</skrip>
</kepala>
<tubuh>
<div id="d" style="display:none;"></div>
<div id='a'>tes</div>
</tubuh>
</html>

Efek visual di sini sempurna, tetapi ada tiga masalah:

1. Struktur HTML perlu diubah (item ini tidak akan dijelaskan)

2. Menghancurkan pengalaman pengguna: Saya telah mencoba metode ini sebelumnya, tetapi bilah gulir tidak akan tetap di tempatnya saat saya menyegarkan halaman, dan hal ini tidak dapat saya toleransi.

3. Hancurkan beberapa event js, seperti yang disebutkan cloudgamer yang akan menghancurkan event gulir jendela. Di sini, setidaknya N banyak komponen js yang dienkapsulasi dapat dibatalkan.

3. Solusi "metode kliring" yang belum pernah terjadi sebelumnya dengan menggunakan metode Mars

Prinsipnya sangat aneh sehingga saya tidak bisa menjelaskannya, dan penerapannya terlalu terbatas. Sebagai contoh, lihat:

Berikut isi kutipannya:

4. Ekspresi plus solusi latar belakang tetap untuk penggunaan baru atas teknologi lama

Solusi ini secara visual dapat mencapai posisi statis dengan sempurna. contoh:

cloudgamer: Efek lapisan pop-up AlertBox (kotak prompt informasi).

Saya sebelumnya: "Solusi masker transparan layar penuh (lightBox) yang sederhana"