เมื่อพูดถึงกลไกในการประมวลผล CSS นั้น IE มีหลายสิ่งที่ทำให้ผู้คนอาเจียนเป็นเลือดอยู่เสมอ แต่พวกเขายังคงพอใจกับการปรับปรุงในปัจจุบัน
ใช้การสนับสนุน pseudo-class:hover เป็นตัวอย่าง ในที่สุด IE7+ ก็เพิ่มการรองรับแท็กอื่นที่ไม่ใช่ a. แน่นอนว่าเราควรชื่นชมการปรับปรุงดังกล่าว แต่ภายใต้ IE6 การสนับสนุนของ :hover สำหรับ a นั้นไม่น่าพึงพอใจนัก ต่อไปนี้เป็นปัญหาที่ฉันต้องการพูดคุยสั้นๆ:โฮเวอร์ใน IE6 และเบราว์เซอร์รุ่นก่อนหน้า
หลายๆ คนอาจทราบปัญหาบางประการเกี่ยวกับ :hover ใน IE6 และเบราว์เซอร์รุ่นก่อนๆ แล้ว (ต่อไปนี้จะเรียกว่า IE6-) ฉันต้องการพูดคุยเกี่ยวกับปัญหาเช่น a:hover span{} เป็นหลัก
บางครั้งเพื่อที่จะเพิ่มเอฟเฟกต์ไดนามิกง่ายๆ เรามักจะใช้ :hover เพื่อช่วย ตัวอย่างเช่น เรามักจะเปลี่ยนสีของข้อความเมื่อเมาส์ผ่านลิงก์ ชอบ:
ใช่ สิ่งนี้จะใช้ได้กับทุกเบราว์เซอร์ แต่ถ้าคุณเปลี่ยนเป็นสิ่งนี้:
คุณจะพบว่าไม่มีอะไรเกิดขึ้นภายใต้ IE6- สไตล์ของเราไม่ถูกต้อง ใช่แล้ว หลายๆ คนน่าจะเคยเจอปัญหานี้และแก้ไขได้แล้ว
ใช่ คุณเพียงแค่ต้องเพิ่มรูปแบบ a:hover{} อื่นเพื่อแก้ไขปัญหานี้ ซึ่งอาจมีการซูม การเติม ขอบ และคุณลักษณะอื่นๆ ดังต่อไปนี้:
เมื่อเห็นว่าเอฟเฟกต์ปกติกลับมาแล้ว ฉันจึงคิดถึงสิ่งที่อาจทำให้เกิดความล้มเหลว :hover คุณสามารถใช้การซูม การแสดงผล ช่องว่างภายใน และคุณลักษณะอื่นๆ เพื่อทำสิ่งนี้ได้ ดังนั้นฉันคิดว่าอาจเป็นเพราะ haslayout ก็คงจะเป็นเช่นนั้น แต่ถ้าคุณทำการทดสอบต่อไป คุณจะพบว่าไม่ว่าคุณจะเขียนแอตทริบิวต์ใดใน a:hover{} เช่น สี ขนาดตัวอักษร โอเวอร์โฟลว์ (แม้แต่แอตทริบิวต์ที่ไม่มีอยู่ เช่น xx:yyy) คุณก็สามารถทำได้ คืนค่าให้เป็นปกติ
คุณรู้สึกทึ่งเล็กน้อยหลังจากการทดสอบที่นี่หรือไม่? ใช่ ฉันก็เป็นเช่นนั้นเหมือนกัน ส่วนเหตุผลนั้นผมยังไม่รู้ อาจมีบางคนรู้
a:โฮเวอร์{ซูม:1;}
a:โฮเวอร์ em{color:#F00;}
<a href="?">เปลี่ยน <em>สี</em></a> ของฉันเมื่อวางเมาส์เหนือ
a:โฮเวอร์ em{color:#F00;}
<a href="?">เปลี่ยน <em>สี</em></a> ของฉันเมื่อวางเมาส์เหนือ
a:โฮเวอร์{สี:#F00;}
<a href="?">เปลี่ยนสีของฉันเมื่อวางเมาส์ไว้</a>