IE6 transparent fix อีกวิธีที่เหมาะกับการใช้เป็น Background แนะนำมากๆ

จากบทความก่อนๆ ที่ผมเขียนเกี่ยวกับการแก้ปัญหา PNG ใน IE6 ไปรวมม ตอนนี้ผมมาเจออีก 1 วิธี แต่ตอนนั้นผมเลือกใช้วิธี Alphaimageloader ไปซะก่อน ก็เลยยังไม่ได้ดูวิธีนี้จริงๆจังๆ (แต่พอมาดูแล้วมันได้ผลดีเยี่ยมกว่าวิธี Alpha Image loader อีกคับ) ขอบคุณคนที่เขียนบทความนี้มากๆเลยครับ จากที่ผมแนะนำวิธีก่อนนั้น ก็พอที่จะ list ผลเสียของการแก้ไขปัญหา PNG ใน IE6 ด้วยวิธี Alpha Image Loader ได้ดังนี้ครับ

ข้อที่ 1. ในการ repeat background ที่มันสามารถ repeat ได้ ไม่ได้เกิดจากการที่เอา background นั้นๆมาต่อกันนะคับ แต่มันเกิดจากการนำไฟล์ภาพ PNG ยืด ออกคับ ทำให้การแสดงผลกับลักษณะภาพบางภาพผิดเพี้ยนไป ซึ่งผมได้แก้ปัญหานี้ ด้วยการตัด background ให้ใหญ่ที่สุด (โดยมีขนาดไฟล์ไม่เกิน 30k) เพื่อเผื่อการยืดออก ไม่ให้ภาพเพี้ยน เวลานำไปใช้กับ IE6 คับ

ข้อที่ 2. เราไม่สามารถกำหนด background position ให้มันได้คับ ดังนั้น วิธี Alpha Image Loader จึงเหมาะกับการใช้งานที่ไม่จำเป็นต้องกำหนด background position คับ
ทีนี้มาดูวิธีของ Drew Diller กันบ้างคับ ลักษณะของการใช้งาน จะเหมือนกับ วิธี pngfix.htc ที่หลายคนใช้งานกันอยู่แล้วคับแต่ด้วย วิธีของ Drew Diller นี้สามารถแก้ปัญหา background repeat และ background position ได้อย่างสมบูรณ์มากคับ ตอนนี้ เรามาดูวิธีใช้งานกันเลยนะคับ
ดาวโหลดไฟล์นี้ DD_belatedPNG_0.0.7a-min.js มาคับ
เช็คว่า เป็น IE6 หรือไม่ ถ้าเป็น IE6 ให้เรียกตัว js ในข้อ 1 รวมทั้งกำหนด class ที่เรียกใช้ png (ในที่นี้ ใช้คลาสที่ชื่อว่า png_bg คับ)

<!--[if IE 6]>
<script src="DD_belatedPNG_0.0.7a-min.js"></script>
<script>
  DD_belatedPNG.fix('.png_bg'); //ใส่ชื่อ class ตามด้วย comma
</script>
<![endif]-->  

 
3.จาก code ด้านบน เราสามารถที่จะกำหนดชื่อ class หลายๆตำแหน่งที่ใช้ png ไฟล์ได้ ด้วยการเพิ่มชื่อ class ต่อท้ายกันไป โดยคั่นด้วยเครื่องหมาย comma ( , ) ตามตัวอย่างด้านล่างคับ

บทความนี้สามารถเข้าไปอ่านเพิ่มเติมได้ที่
http://www.dillerdesign.com/experiment/DD_belatedPNG/
เท่านี้ เราก็สามารถแก้ปัญหา PNG ใน IE6 ได้แล้วคับ เย้