มาพูดถึงตำแหน่งคงที่ของ IE6 อีกครั้ง

ผู้เขียน：Eve Cole เวลาอัปเดต：2010-10-12 18:13:26

เป็นที่ทราบกันดีว่าเบราว์เซอร์ IE6 ซึ่งผลิตในปี 2545 และปัจจุบันเป็นกระแสหลักในประเทศของฉัน ไม่รองรับแอตทริบิวต์การกำหนดตำแหน่งคงที่ของ CSS2 ด้วยเหตุนี้ วิศวกรส่วนหน้าที่มีปัญหาจึงได้คิดค้นวิธีแก้ปัญหาต่างๆ ขึ้นมา:

1. โซลูชัน js ทั่วไป

นี่เป็นโฆษณาที่เก่าแก่ที่สุดและใช้กันอย่างแพร่หลาย ตัวอย่างเช่น โฆษณาโคลงสั้น ๆ จำนวนมากที่อยู่หลังแถบเลื่อนใช้วิธีแก้ปัญหานี้ ข้อเสียคือองค์ประกอบแถบเลื่อนการลากจะสั่นมาก แม้ว่าจะสามารถปรับปรุงได้ด้วยการทำให้เรียบ แต่เอฟเฟกต์ก็ยังไม่เหมาะ แต่สิ่งที่ฉันอยากจะพูดก็คือ แม้ว่าเอฟเฟกต์ภาพของโซลูชันนี้จะแย่กว่าเล็กน้อย แต่ความเสถียรก็ไม่มีอะไรจะพูด

2. ใช้โครงสร้าง HTML และวิธีการจำลองเค้าโครง

โซลูชันนี้เคยถูกใช้โดย 163 Blog 163 วางเนื้อหาทั้งหมดไว้ในคอนเทนเนอร์ที่มีความสูง 100% และแถบเลื่อนตั้งค่าเป็นอัตโนมัติ จากนั้นตั้งค่าเลเยอร์ที่อยู่ในตำแหน่งที่แน่นอนด้านล่าง เพื่อให้เลเยอร์ที่อยู่ในตำแหน่งที่แน่นอนสามารถเข้าถึง สถานะคงที่ หลักการ: แถบเลื่อนที่คุณลากไม่ใช่ทั้งหน้าที่คุณลาก แต่เป็นคอนเทนเนอร์ที่จำลองทั้งหน้า ดังนั้นพื้นที่ด้านนอกคอนเทนเนอร์จึง "นิ่ง" รายละเอียด:

ต่อไปนี้เป็นเนื้อหาที่ยกมา:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<หัว>
<สไตล์>
*{ระยะขอบ:0}
ร่างกาย{
ความสูง:1000px;
ความกว้าง:1000px;
-
#ก{
ความกว้าง:300px;
ความสูง:100px;
พื้นหลัง:สีแดง;
-
</สไตล์>
<สคริปต์>
var isie6 = window.XMLHttpRequest?false:true;
window.onload = ฟังก์ชั่น () {
var a = document.getElementById('a');
var d = document.getElementById('d');
ถ้า (isie6) {
a.style.position = 'สัมบูรณ์';

window.onscroll = ฟังก์ชั่น () {
d.innerHTML = '';
-
}อื่น{
a.style.position = 'คงที่';
-
ก.style.right = '0';
ก.style.bottom = '0';
-
</สคริปต์>
</หัว>
<ร่างกาย>
<div id="d" style="display:none;"></div>
<div id='a'>ทดสอบ</div>
</ร่างกาย>
</html>

เอฟเฟ็กต์ภาพที่นี่สมบูรณ์แบบ แต่มีปัญหาสามประการ:

1. จำเป็นต้องเปลี่ยนโครงสร้าง HTML (รายการนี้จะไม่อธิบาย)

2. ทำลายประสบการณ์ผู้ใช้: ฉันเคยลองใช้วิธีนี้มาก่อนแล้ว แต่แถบเลื่อนจะไม่คงอยู่เมื่อฉันรีเฟรชหน้าเว็บ ซึ่งฉันไม่สามารถทนได้

3. ทำลายเหตุการณ์ js บางอย่าง เช่น cloudgamer บอกว่ามันจะทำลายเหตุการณ์การเลื่อนของหน้าต่าง ในที่นี้ ส่วนประกอบ js ที่ห่อหุ้มไว้อย่างน้อย N รายการสามารถทำให้ใช้งานไม่ได้

3. วิธีแก้ปัญหา "วิธีการเคลียร์" ที่ไม่เคยมีมาก่อนโดยใช้วิธี Mars

หลักการนี้แปลกมากจนฉันไม่สามารถอธิบายได้ และการใช้งานก็มีจำกัดเกินไป ดูตัวอย่าง:

ต่อไปนี้เป็นเนื้อหาที่ยกมา:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<หัว>
<สไตล์>
*{ระยะขอบ:0}
ร่างกาย{
ความสูง:1000px;
ความกว้าง:1000px;
-
#ก{
ความกว้าง:300px;
ความสูง:100px;
พื้นหลัง:สีแดง;
-
</สไตล์>
<สคริปต์>
var isie6 = window.XMLHttpRequest?false:true;
window.onload = ฟังก์ชั่น () {
var a = document.getElementById('a');
var d = document.getElementById('d');
ถ้า(isie6){
a.style.position = 'สัมบูรณ์';

window.onscroll = ฟังก์ชั่น () {
d.innerHTML = '';
-
}อื่น{
a.style.position = 'คงที่';
-
ก.style.right = '0';
ก.style.bottom = '0';
-
</สคริปต์>
</หัว>
<ร่างกาย>
<div id="d" style="display:none;"></div>
<div id='a'>ทดสอบ</div>
</ร่างกาย>
</html>

4. โซลูชันพื้นหลัง Expression plus แบบคงที่สำหรับการใช้เทคโนโลยีเก่าแบบใหม่

โซลูชันนี้สามารถมองเห็นตำแหน่งคงที่ได้อย่างสมบูรณ์แบบ ตัวอย่าง:

cloudgamer: เอฟเฟกต์เลเยอร์ป๊อปอัพ AlertBox (กล่องแจ้งข้อมูล)

ก่อนหน้าของฉัน: "โซลูชันมาสก์โปร่งใสแบบเต็มหน้าจอ (ไลท์บ็อกซ์) อย่างง่าย"