Beranda>Tutorial Desain Web>Standardisasi WEB

Mari Bicara Tentang Posisi Tetap IE6

Penulis：Eve Cole Waktu Pembaruan：2025-02-06 17:32:26

Browser IE6, yang diproduksi secara luas pada tahun 2002 dan saat ini menjadi arus utama di negara saya, tidak mendukung atribut posisi tetap CSS2.

1. Solusi untuk JS biasa

Ini adalah yang tertua dan banyak digunakan. Kerugiannya adalah bahwa elemen batang gulir yang menyeret sangat keras. Namun, penting untuk mengatakan bahwa meskipun solusi ini memiliki sedikit efek visual yang buruk, stabilitasnya tidak dapat disebutkan.

2. Gunakan metode html dan metode simulasi tata letak

Solusi ini pernah diterapkan oleh 163 blog. negara . Prinsip: Scrollbar yang Anda seret bukanlah seluruh halaman, tetapi wadah yang mensimulasikan seluruh halaman, sehingga tempat di luar wadah adalah "masih". terperinci:


Berikut ini adalah konten yang dikutip:

<! 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">
<head>
<tyle>
*{margin: 0}
tubuh{
Tinggi: 1000px;
Lebar: 1000px;
}
#A{
Lebar: 300px;
Tinggi: 100px;
Latar Belakang: Merah;
}
</tyle>
<script>
var isie6 = window.xmlHttpRequest? Salah: true;
window.onload = function () {
var a = document.geteLementById ('a');
var d = document.getElementById ('d');
if (isie6) {
a.style.position = 'absolute';

window.onscroll = function () {
D.InnerHtml = '';
}
}kalau tidak{
a.style.position = 'tetap';
}
A.Style.Right = '0';
a.style.bottom = '0';
}
</script>
</head>
<body>
<div id = "d" style = "display: none;"> </div>
<Div id = 'a'> tes </div>
</body>
</html>


Di sini efek visualnya sempurna, ada tiga masalah:

1. Perlu mengubah struktur HTML (item ini tidak dijelaskan)

2. Hancurkan pengalaman pengguna: Saya telah mencoba metode ini sebelumnya, tetapi ketika saya menyegarkan halaman, bilah gulir tidak akan tetap di tempatnya, yang tidak bisa saya toleransi.

3. Hancurkan beberapa peristiwa JS.

3. Solusi "metode kliring" yang belum pernah terjadi sebelumnya

Prinsipnya sangat aneh, saya tidak bisa menjelaskannya, dan keterbatasan aplikasinya terlalu besar. Lihat contoh:


Berikut ini adalah konten yang dikutip:

<! 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">
<head>
<tyle>
*{margin: 0}
tubuh{
Tinggi: 1000px;
Lebar: 1000px;
}
#A{
Lebar: 300px;
Tinggi: 100px;
Latar Belakang: Merah;
}
</tyle>
<script>
var isie6 = window.xmlHttpRequest? Salah: true;
window.onload = function () {
var a = document.geteLementById ('a');
var d = document.getElementById ('d');
if (isie6) {
a.style.position = 'absolute';

window.onscroll = function () {
D.InnerHtml = '';
}
}kalau tidak{
a.style.position = 'tetap';
}
A.Style.Right = '0';
a.style.bottom = '0';
}
</script>
</head>
<body>
<div id = "d" style = "display: none;"> </div>
<Div id = 'a'> tes </div>
</body>
</html>


4. Ekspresi yang baru digunakan dan solusi latar belakang tetap untuk teknologi lama

Solusi ini secara visual dapat mewujudkan posisi statis secara visual. contoh:

CloudGamer: Lapisan Pop-Up Alertbox (Kotak Prompt Informasi) Efek

Saya sebelumnya: "Solusi Topeng Transparan Layar Penuh Sederhana (LightBox)"

Artikel Terkait