เหตุใดการรวมคลาสหลอกของแอตทริบิวต์พื้นหลังบวก a และ a:hover ไม่ทำงานภายใต้ตรรกะปกติใน IE6 ฉันทดสอบแล้วว่าปัญหานี้มีอยู่ใน IE6 และเบราว์เซอร์ที่ต่ำกว่า ฉันมักจะพบปัญหานี้และใช้วิธีการอื่นเพื่อแทนที่ ตอนนี้ฉันพบวิธีแก้ไขปัญหาอื่นแล้ว
ยกตัวอย่างการนำทาง โค้ดต่อไปนี้สอดคล้องกับตรรกะของ CSS อย่างสมบูรณ์ ตามทฤษฎีแล้ว ควรเป็น " a:hove ภาพพื้นหลัง " รวมกับ "a.nav_1 พื้นหลังตำแหน่ง" เพื่อให้ได้ผลลัพธ์ที่คาดหวัง แสดงเฉพาะภาพพื้นหลังอย่างผิดปกติ ไม่มี การสาธิต พิกัดพื้นหลัง (โปรดใช้เบราว์เซอร์ IE6 และ IE6 หรือสูงกว่าเพื่อเปรียบเทียบ)
*{ระยะขอบ:0;ช่องว่างภายใน:0;}
.header{ ตำแหน่ง:ญาติ; ความกว้าง:745px; ความสูง:225px; พื้นหลัง:url(bg.jpg) ไม่ซ้ำ;}
/*การนำทาง*/
#nav p{ ตำแหน่ง: ซ้ายแน่นอน: 0; ด้านล่าง: 0; ความกว้าง: 100%;}
#nav a{float:left;height:44px;overflow:hidden;line-height:200px;font-size:0;}
#nav a:hover {พื้นหลัง:url(bg.jpg) ไม่ทำซ้ำ 0 0;}
/*สถานะการนำทาง: เบราว์เซอร์ IE6 และต่ำกว่าเข้ากันไม่ได้ เบราว์เซอร์อื่นเป็นปกติ*/
#nav a.nav_1{ความกว้าง:80px;ตำแหน่งพื้นหลัง:0 -213px;}
#nav a.nav_2{ความกว้าง:86px;ตำแหน่งพื้นหลัง:-80px -213px;}
#nav a.nav_3{ความกว้าง:227px;ตำแหน่งพื้นหลัง:-166px -213px;}
#nav a.nav_4{ความกว้าง:92px;ตำแหน่งพื้นหลัง:-393px -213px;}
#nav a.nav_5{ความกว้าง:98px;ตำแหน่งพื้นหลัง:-485px -213px;}
#nav a.nav_6{ความกว้าง:162px;ตำแหน่งพื้นหลัง:-583px -213px;}
วิธีแก้ปัญหาที่ฉันเคยใช้ก่อนหน้านี้คือการเพิ่มตัวเลือกที่เกี่ยวข้องผ่านสถานะ วิธีนี้ทำให้รู้สึกว่าโค้ดดูป่อง และเนื่องจากคนที่คลั่งไคล้โค้ด จึงเป็นเรื่องยากสำหรับฉันที่จะยอมรับ การสาธิต
/*สถานะการส่งผ่านการนำทาง: วิธีแก้ไขก่อนหน้า*/
#nav a.nav_1:โฮเวอร์,
#nav a.nav_1{ความกว้าง:90px;ตำแหน่งพื้นหลัง:0 -211px;}
#nav a.nav_2:โฮเวอร์,
#nav a.nav_2{ความกว้าง:86px;ตำแหน่งพื้นหลัง:-80px -213px;}
#nav a.nav_3:โฮเวอร์,
#nav a.nav_3{ความกว้าง:227px;ตำแหน่งพื้นหลัง:-166px -213px;}
#nav a.nav_4:โฮเวอร์,
#nav a.nav_4{ความกว้าง:92px;ตำแหน่งพื้นหลัง:-393px -213px;}
#nav a.nav_5:โฮเวอร์,
#nav a.nav_5{ความกว้าง:98px;ตำแหน่งพื้นหลัง:-485px -213px;}
#nav a.nav_6:โฮเวอร์,
#nav a.nav_6{ความกว้าง:162px;ตำแหน่งพื้นหลัง:-583px -213px;}
ตามทฤษฎี ตัวเลือก "a.nav_1" จะสูงกว่า "a:hover" แต่เมื่อฉันพยายามเพิ่ม !important ฉันพบว่า IE6 แสดง Demo ปกติ
ไม่มีผลข้างเคียงเมื่อทดสอบเบราว์เซอร์อื่น คราวนี้ดูเหมือนว่าจะไม่เกี่ยวข้องกับ haslayout แต่สาเหตุและผลลัพธ์ของมันก็น่าสงสัยเช่นกัน
/*สถานะการส่งผ่านการนำทาง: โซลูชันปัจจุบัน*/
#nav a.nav_1{ความกว้าง:80px;ตำแหน่งพื้นหลัง:0 -211px!สำคัญ;}
#nav a.nav_2{ความกว้าง:86px;ตำแหน่งพื้นหลัง:-80px -213px!สำคัญ;}
#nav a.nav_3{ความกว้าง:227px;ตำแหน่งพื้นหลัง:-166px -213px!สำคัญ;}
#nav a.nav_4{ความกว้าง:92px;ตำแหน่งพื้นหลัง:-393px -213px!สำคัญ;}
#nav a.nav_5{ความกว้าง:98px;ตำแหน่งพื้นหลัง:-485px -213px!สำคัญ;}
#nav a.nav_6{ความกว้าง:162px;ตำแหน่งพื้นหลัง:-514px -213px!สำคัญ;}
วิธีแก้ปัญหาที่ ytzong มอบให้นั้นดีมาก ~ ดูเหมือนว่าการไม่ใช้คำย่อพื้นหลังยังคงมีข้อดีอยู่ มีปัญหากับตรรกะของการเพิ่มพื้นหลังใน IE6 ฉันได้ทดสอบแอตทริบิวต์เส้นขอบแล้วและ การสาธิต ก็ไม่มีปัญหานี้
*{ระยะขอบ:0;ช่องว่างภายใน:0;}
.header{ ตำแหน่ง:ญาติ; ความกว้าง:745px; ความสูง:225px; พื้นหลัง:url(bg.jpg) ไม่ซ้ำ;}
/*การนำทาง*/
#nav p{ ตำแหน่ง: ซ้ายแน่นอน: 0; บน: 180px; ความกว้าง: 100%;}
#nav pa{float:left;height:44px;overflow:hidden;line-height:200px;font-size:0;}
#nav pa:hover{พื้นหลัง-ภาพ:url(bg.jpg);
/*สถานะการนำทาง: เบราว์เซอร์ IE6 และต่ำกว่าเข้ากันไม่ได้ เบราว์เซอร์อื่นเป็นปกติ*/
#nav p a.nav_1{ความกว้าง:80px;ตำแหน่งพื้นหลัง:0 -213px;}
#nav p a.nav_2{ความกว้าง:86px;ตำแหน่งพื้นหลัง:-80px -213px;}
#nav p a.nav_3{ความกว้าง:227px;ตำแหน่งพื้นหลัง:-166px -213px;}
#nav p a.nav_4{ความกว้าง:92px;ตำแหน่งพื้นหลัง:-393px -213px;}
#nav p a.nav_5{ความกว้าง:98px;ตำแหน่งพื้นหลัง:-485px -213px;}
#nav p a.nav_6{ความกว้าง:162px;ตำแหน่งพื้นหลัง:-583px -213px;}
ฉันไม่รู้ว่ามีวิธีที่ดีกว่านี้หรือเปล่า~