ปัญหา IE กับไฟล์ png

ปัญหา 1 ที่ทำให้ผมรู้สึกว่า IE นี้มันตัวปัญหาจริง ๆ จะให้รูป PNG ที่มันมี transparant ก็ดันกลายเป็นสีฟ้าอีก เซงกันไป

พอดีช่วงนีก็้ำกำลังหัดทำเว็บครั่นจะใช้รูป gif ธรรมดา ๆ  ได้ไง เด๋วนี้มันต้อง PNG กันแล้ว และจากที่เคยได้ยินมาคร่าว ๆ ว่า IE จะมีปัญหากะ ไฟล์ PNG อยู่ตรงการแสดงผล ในส่วนที่เป็น transparant ว่ามันจะกลายเป็นสีฟ้า ๆ   ว่าแล้วก็ลองหาข้อมูลจากคุณ google 

** ---------ผ่านไป 5 นาที------------**

ก็พอสรุปได้คร่าว ๆ ว่าทาง Microsoft [MSDN ] นั้นได้เขียนวิธีแก้ปัญหาเรื่องนี้ไว้แล้ว 

http://www.twinhelix.com/css/iepngfix/ ได้นำมาประยุกต์ต่ออีกทีเพื่อให้ง่ายต่อการใช้งานและสามารถใช้ให้เป็น background ได้ด้วย โดยการเรียกใช้งาน javascript ผ่าน Properties ของ CSS  ที่ชื่อว่า behavior (งงกันไหมเนี้ย 555+)  เอาเป็นว่ามาดูการใช้งานกันดีกว่า 

1. ให้ Download file iepngfix.zip มาเสียก่อน แล้วแตกไฟล์ zip ออกมาจะได้ไฟล์ 2 ไฟล์คือ  blank.gif กับ iepngfix.htc จากนั้นก็เอามันไปไว้ในที่ชอบที่ชอบ :P ที่เดียวกับ html ก็ได้ครับ

2. จากนั้นก็เขียนนี้ลงไป

<style type="text/css">

.pngfix,img {
   behavior: url("iepngfix.htc");
}

</style>

 ถ้าต้องการให้ element ไหนใช้ .png เป็น background ก็ใช้แบบนี้ได้ เช่น <div  class="menu pngfix"></div>

 3. ตั้งค่า path ให้ถูกต้อง มีด้วยกัน 2 ที่คือ

- ในข้อที่ 2 

behavior: url("iepngfix.htc");

 - ในไฟล์ iepngfix.htc ใช้โปรแกรม editor ตัวไหนลองเบปิดดูก็ได้ครับ ตรงบรรทัดที่ 14 จะเป็นการระบุ path ของไฟล์ blank.gif ถ้าอยู่ใน Folder เดียวกันอยู่แล้วก็ไม่ต้องแก้ครับ

// This must be a path to a blank image. That's all the configuration you need.
if (typeof blankImg == 'undefined') var blankImg = 'blank.gif';

 

 แต่กระนั้นมันก็ไม่ได้สมบูรณ์แบบซะทีเดียวจากที่ใช้ก็พอสรุปได้คร่าว ๆ ตามนี้อะ

- ถ้าหาเราเอาไปใช้เป็น background จะไช้ repeat ไม่ได้ คือ ต้องเป็น no-repeat เท่านั้น

- ไม่สามารถกำหนด position ให้ได้ แต่จะให้ค่า default ไำว้ที่ top left มาให้

-  ใช้ได้แต่กับ IE 5.5-6  ส่วนบาง browser นั้นจะ  support .png อยู่แล้ว

- ถ้าคลิกขวาที่รูปแล้วเซฟ จะได้ไฟล์ blank.gif ไม่แน่ใจว่าเป็นบักหรือว่าคนเขียนตั้งใจ    (แต่เท่าที่ดูผมว่าเป็นบักนะ ^O^ ) 

ปล. ไม่แน่ใจเหมือนกันว่าใครจะมีวิธีที่ดีกว่านี้หรือเปล่า ถ้ามีก็บอกข้าพเจ้าบ้างเด๋อ

 ปล2. อยากบอกว่าเขียนครั้งแรกอะ ผิดพลาดอย่างไรโปรดขี้แนะข้าน้อยด้วย  ขอบคุณครับ

 อ้างอิง:

http://www.twinhelix.com/css/iepngfix/

http://msdn.microsoft.com/library/default.asp?url=/workshop/author/filter/reference/filters/AlphaImageLoader.asp

http://www.divland.com/blog/2007/04/25/fix-png-ie6/ 

[वीर]

ถ้าใส่ของแปลกๆพวกนี้ลงไปแล้ว Firefox, Opera, Safari ไม่เจ๊งไปด้วย ก็ไม่เป็นไรอะครับ.

[Jdeper]

ผมไม่แน่ใจเหมือนกันว่า behavior สร้างขึ้นมาเพื่อ IE เท่านั้นหรือป่าว เพราะฉะนั้นใน browser อื่นๆ ส่วนใหญ่ ก็จะไม่รู้จักนะครับ 

แต่ในตัวไฟล์  iepngfix.htc จะมีการเช็ค  browser ก่อนถ้าไม่ใช้ ie5.5-6 ก็จะไม่ fix อยู่แล้วครับ

จึงไม่น่าจะมีปัญหาอะไร กับ browser อื่น ๆ นะครับ

[वीर]

ถ้าใน script check ก่อนอยู่แล้วก็ดีครับ​ :-).  

เวลาเข้าเว็บโดยเฉพาะเว็บไทย มักจะหลอนๆ ใช้ได้แต่ IE 6 กันเยอะเหมือนกัน เลยระแวงไว้ก่อน :-P.  ถ้าแบบ IE 6 ก็ได้ IE 7 ก็ได้ Firefox ก็ได้ อื่นๆก็ได้นี่ก็เจ๋งเลย :-D.  (ยิ่งผ่าน W3C validation ได้ด้วยนี่เจ๋งกว่า ^_^)

[keeki]

ขอบคุณมากๆเลยครับ มีประโยชน์มากๆเลย ^^