CSS Hack สำหรับ IE6, IE7 และ IE8+
ช่วงนี้วุ่นวายกับการแก้บัก IE6, IE7 อยู่ พอดีจำเป็นต้องใช้ แม้ว่าจะไม่อยากทำก็เหอะ จริงๆแล้ว CSS Hack ไม่ใช่เรื่องใหม่เลย มันมีมาชาติกว่าแล้ว แต่ไม่เคยจดลิสไว้อ่านเองแบบง่ายๆเลยสักครั้ง ก็เลยมานั่งทดลองแล้วก็ลิสมาให้ดูกันง่ายๆ สำหรับใครที่จำเป็น แต่ถ้าไม่จำเป็นไม่ควรใช้เท่าไหร่นะจ๊ะ
หมายเหตุ:
- inline code หมายถึง แทรกเข้าไปข้างหน้า properties ของ css เช่น .wrapper{ *color: red; }
- selector code หมายถึง แทรกเข้าไปข้างหน้า selector เช่น *html .wrapper{ color: red;}
แสดงผลเฉพาะ IE6
- inline code >> ให้ใส่ _ เข้าไปข้างหน้า attribute เช่น _background-color: red; แบบนี้จะแสดงพื้นหลังสีแดงเฉพาะ IE6 เท่านั้น
- selector code >> ให้ใส่ *html แล้วเว้นวรรค ตามด้วย selector เช่น *html .content {background-color: red;}
แสดงผลเฉพาะ IE7
- inline code >> แบบที่แสดงผลเฉพาะ IE7 คิดว่าไม่มี ใครทราบช่วยบอกด้วยนะคะ
- selector code >> ให้ใส่ *:first-child+html แล้วเว้นวรรค เข้าไปข้างหน้า selector เช่น *:first-child+html .content {background-color: yellow;}
แสดงผลใน IE6 และ IE7
- inline code >> ให้ใส่ * หรือ ^ เข้าไปข้างหน้า attribute เช่น *background-color: green; หรือ ^background-color: green;
แสดงผลใน IE8+
- selector code >> ให้ใส่ html>/**/body แล้วเว้นวรรค เข้าไปข้างหน้า selector เช่น html>/**/body .content {background-color: blue;}
แอบขี้เกียจแปะรูปตัวอย่าง เอาเป็นว่าใช้ได้ชัวร์ๆ เอาไปลองกันเองละกันนะจ๊ะ
ปล. entry นี้เอาไว้จดส่วนตัวกันลืม 55
ขอบคุณมากครับ จะลองนำไปใช้ดูครับ