หน้าแรก>การสอนการออกแบบเว็บไซต์>การทำให้เว็บเป็นมาตรฐาน

มาพูดคุยเกี่ยวกับการวางตำแหน่งคงที่ของ IE6

ผู้เขียน：Eve Cole เวลาอัปเดต：2025-02-06 17:32:26

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

1. การแก้ปัญหา JS ปกติ

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

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

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


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

<! 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">
<head>
<style>
*{margin: 0}
ร่างกาย{
ความสูง: 1000px;
ความกว้าง: 1000px;
-
#a {
ความกว้าง: 300px;
ความสูง: 100px;
ความเป็นมา: สีแดง;
-
</style>
<script>
var isie6 = window.xmlhttprequest? เท็จ: จริง;
window.onload = function () {
var a = document.getElementById ('a');
var d = document.getElementById ('d');
ถ้า (ISIE6) {
A.Style.Position = 'Absolute';

window.onscroll = function () {
d.innerhtml = '';
-
}อื่น{
a.style.position = 'คงที่';
-
A.STYLE.RIGHT = '0';
a.style.bottom = '0';
-
</script>
</head>
<body>
<div id = "d" style = "display: none;"> </div>
<div id = 'a'> ทดสอบ </div>
</body>
</html>


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

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

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

3. ทำลายเหตุการณ์บางอย่างของ JS

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">
<head>
<style>
*{margin: 0}
ร่างกาย{
ความสูง: 1000px;
ความกว้าง: 1000px;
-
#a {
ความกว้าง: 300px;
ความสูง: 100px;
ความเป็นมา: สีแดง;
-
</style>
<script>
var isie6 = window.xmlhttprequest? เท็จ: จริง;
window.onload = function () {
var a = document.getElementById ('a');
var d = document.getElementById ('d');
ถ้า (ISIE6) {
A.Style.Position = 'Absolute';

window.onscroll = function () {
d.innerhtml = '';
-
}อื่น{
a.style.position = 'คงที่';
-
A.STYLE.RIGHT = '0';
a.style.bottom = '0';
-
</script>
</head>
<body>
<div id = "d" style = "display: none;"> </div>
<div id = 'a'> ทดสอบ </div>
</body>
</html>


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

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

CloudGamer: AlertBox Pop-Up Layer (ข้อมูลพรอมต์ข้อมูล) เอฟเฟกต์

ก่อนหน้าของฉัน: "โซลูชัน Mask (Lightbox) แบบเต็มหน้าจอแบบเต็มหน้าจอ"

บทความที่เกี่ยวข้อง