เนื่องจากฉันมีทักษะในการสร้างหน้าเว็บ ฉันจึงได้ยินมานานแล้วว่าไฟล์ PNG โปร่งแสงจะมีปัญหาในการแสดงผลภายใต้ IE6 แต่เนื่องจากฉันไม่เคยมีเว็บไซต์ของตัวเอง ฉันจึงไม่เคยพบมันเลย
ฉันเริ่มสร้างเว็บไซต์ของตัวเองเมื่อต้นปีนี้ ฉันใช้รูปภาพ PNG ที่มีส่วนที่โปร่งใสเพื่อสร้างโลโก้ของเว็บไซต์ ฉันคิดว่ามันเก่าพอแล้วและไม่จำเป็นต้องพิจารณา IE6 วันหนึ่งเมื่อฉันกลับมาจากเลิกงานและเปิดแบ็กเอนด์ของ Google Analytics ฉันพบว่าการเข้าชม IE6 คิดเป็น 40% ของการเข้าชมทั้งหมด ฉันรู้สึกตกใจและดาวน์โหลด IE6 เวอร์ชันสีเขียวจากอินเทอร์เน็ตอย่างรวดเร็วเพื่อทดสอบเว็บไซต์ของฉัน ตามที่คาดไว้ โลโก้ทึบแสงโดยสิ้นเชิง
ดังนั้นฉันจึงค้นหาวิธีแก้ปัญหาทางออนไลน์ทั้งคืน โดยทั่วไปแล้ว วิธีการออนไลน์นั้นค่อนข้างซับซ้อน รวมถึงตัวกรอง css, js, การแทนที่ gif เป็นต้น แต่ฉันมักจะรู้สึกว่ามันไม่สวยงามพอ ในที่สุด หลังจากค้นหามาทั้งคืน ฉันพบวิธีที่ต้องใช้โค้ด js เพียง 2 ประโยคในการแก้ปัญหาอย่างราบรื่น มาแบ่งปันกับคุณต่อไป
ขั้นแรก ดาวน์โหลด iepng.js จากเว็บไซต์ของฉัน
http://www. *** .com/templates/default/js/iepng.js
หากรหัสองค์ประกอบของเว็บไซต์ที่ใช้ PNG แบบกึ่งโปร่งใสเป็นพื้นหลังเป็นโลโก้ ให้เพิ่มสิ่งต่อไปนี้ระหว่าง <head></head>:
| <!-- สำหรับการแก้ไข ie6 png --> <script type="text/javascript" src="templates/js/iepng.js"></script> <script type=text/javascript> EvPNG.fix('#logo');</script> |
สุดท้ายนี้ ให้ฉันอธิบายหน่อยว่า หากคุณใช้ png โปร่งใสเป็นพื้นหลังของ div id foo ก็ควรจะเขียนเป็น:
| EvPNG.fix('#foo'); |
หากคุณใช้ PNG แบบโปร่งใสเป็นพื้นหลังของคลาส div ของแท่ง ก็ควรจะเขียนเป็น:
| EvPNG.fix('.bar"); |
ไวยากรณ์เหมือนกับ CSS ฉันหวังว่าจะแลกเปลี่ยนทักษะการสร้างเว็บไซต์กับคุณต่อไป
บทความนี้สร้างสรรค์โดย Wang Zai ผู้ดูแลเว็บไซต์ Tianniu.com (www.hers99.com) โปรดระบุแหล่งที่มาเมื่อพิมพ์ซ้ำ
ขอบคุณ Wangzi สำหรับการสนับสนุนของคุณ