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


200923 May

จากบทความก่อนๆ ที่ผมเขียนเกี่ยวกับการแก้ปัญหา 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 ( , ) ตามตัวอย่างด้านล่างคับ
<!--[if IE 6]>
<script src="DD_belatedPNG_0.0.7a-min.js"></script>
<script>
 DD_belatedPNG.fix('.png_bg , #content div.png_bg1, #content .png_bg2');
</script>
<![endif]-->  
 

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

1.
ผู้มาเยือน's picture
Comment ?

says:

เจอะปัญหานี้เหมือนกัน....กับพวก IE
ดีคับเดี๊ยวจะลองนำไปใช้

หาโค้ดส่วนลด , ส่วนลด lazada ล่าสุด ส่วนลด lazada true

หาโค้ดส่วนลด , ส่วนลด lazada ล่าสุด

Finger Style Guitar
(2)

รวม DVD แนวเพลง Finger Style Guitar ต่างๆ

fingerstyle
(1)

DVD และ VCD เพลงแนว Finger Style Guitar

pair bluetooth
(1)

วิธีการ Pair อุปกรณ์ Bluetooth ต่าง ๆ

บทความและความรู้ด้านการพัฒนาเว็บไซต์

css
(11)

บทความเกี่ยวกับ CSS, เทคนิคต่าง ๆในการใช้ CSS เรียนรู้การแก้ไขต่าง ๆ

css hack
(4)

บทความเกี่ยวกับ CSS, เทคนิคในการปัญหา cross browser ในการแสดงผลของ browser ที่แตกต่าง ๆ กัน

drupal
(12)

บทความเกี่ยว Drupal แนะนำการใช้งาน Drupal และเทคนิคต่างๆในการใช้งาน

javascript
(13)

บทความเกี่ยว Javascript แนะนำการใช้งานวิธีแก้ไขต่างๆ

JSON
(1)
php
(4)
SEO
(3)
Web Tools
(3)

แนะนำเครื่องมือสำหรับพัฒนาเวบไซต์