เป็นที่ทราบกันดีว่าเบราว์เซอร์ IE6 ซึ่งผลิตในปี 2545 และปัจจุบันเป็นกระแสหลักในประเทศของฉัน ไม่รองรับแอตทริบิวต์การกำหนดตำแหน่งคงที่ของ CSS2 ด้วยเหตุนี้ วิศวกรส่วนหน้าที่มีปัญหาจึงได้คิดค้นวิธีแก้ปัญหาต่างๆ ขึ้นมา:
1. โซลูชัน js ทั่วไป
นี่เป็นโฆษณาที่เก่าแก่ที่สุดและใช้กันอย่างแพร่หลาย ตัวอย่างเช่น โฆษณาโคลงสั้น ๆ จำนวนมากที่อยู่หลังแถบเลื่อนใช้วิธีแก้ปัญหานี้ ข้อเสียคือองค์ประกอบแถบเลื่อนการลากจะสั่นมาก แม้ว่าจะสามารถปรับปรุงได้ด้วยการทำให้เรียบ แต่เอฟเฟกต์ก็ยังไม่เหมาะ แต่สิ่งที่ฉันอยากจะพูดก็คือ แม้ว่าเอฟเฟกต์ภาพของโซลูชันนี้จะแย่กว่าเล็กน้อย แต่ความเสถียรก็ไม่มีอะไรจะพูด
2. ใช้โครงสร้าง HTML และวิธีการจำลองเค้าโครง
โซลูชันนี้เคยถูกใช้โดย 163 Blog 163 วางเนื้อหาทั้งหมดไว้ในคอนเทนเนอร์ที่มีความสูง 100% และแถบเลื่อนตั้งค่าเป็นอัตโนมัติ จากนั้นตั้งค่าเลเยอร์ที่อยู่ในตำแหน่งที่แน่นอนด้านล่าง เพื่อให้เลเยอร์ที่อยู่ในตำแหน่งที่แน่นอนสามารถเข้าถึง สถานะคงที่ หลักการ: แถบเลื่อนที่คุณลากไม่ใช่ทั้งหน้าที่คุณลาก แต่เป็นคอนเทนเนอร์ที่จำลองทั้งหน้า ดังนั้นพื้นที่ด้านนอกคอนเทนเนอร์จึง "นิ่ง" รายละเอียด:
ต่อไปนี้เป็นเนื้อหาที่ยกมา: " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> ทดสอบ |
เอฟเฟ็กต์ภาพที่นี่สมบูรณ์แบบ แต่มีปัญหาสามประการ:
1. จำเป็นต้องเปลี่ยนโครงสร้าง HTML (รายการนี้จะไม่อธิบาย)
2. ทำลายประสบการณ์ผู้ใช้: ฉันเคยลองใช้วิธีนี้มาก่อนแล้ว แต่แถบเลื่อนจะไม่คงอยู่เมื่อฉันรีเฟรชหน้าเว็บ ซึ่งฉันไม่สามารถทนได้
3. ทำลายเหตุการณ์ js บางอย่าง เช่น cloudgamer บอกว่ามันจะทำลายเหตุการณ์การเลื่อนของหน้าต่าง ในที่นี้ ส่วนประกอบ js ที่ห่อหุ้มไว้อย่างน้อย N รายการสามารถทำให้ใช้งานไม่ได้
3. วิธีแก้ปัญหา "วิธีการเคลียร์" ที่ไม่เคยมีมาก่อนโดยใช้วิธี Mars
หลักการนี้แปลกมากจนฉันไม่สามารถอธิบายได้ และการใช้งานก็มีจำกัดเกินไป ดูตัวอย่าง:
ต่อไปนี้เป็นเนื้อหาที่ยกมา: " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> ทดสอบ |
4. โซลูชันพื้นหลัง Expression plus แบบคงที่สำหรับการใช้เทคโนโลยีเก่าแบบใหม่
โซลูชันนี้สามารถมองเห็นตำแหน่งคงที่ได้อย่างสมบูรณ์แบบ ตัวอย่าง:
cloudgamer: เอฟเฟกต์เลเยอร์ป๊อปอัพ AlertBox (กล่องแจ้งข้อมูล)
ก่อนหน้าของฉัน: "โซลูชันมาสก์โปร่งใสแบบเต็มหน้าจอ (ไลท์บ็อกซ์) อย่างง่าย"