CSS Hack สำหรับ IE6, IE7 และ IE8+

Posted by in Coding

ช่วงนี้วุ่นวายกับการแก้บัก 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