因為本身會一些網頁製作技術,所以很久前就聽說過半透明的PNG檔案在IE6下會有顯示的問題,但由於一直沒有自己的網站,也從來沒有真正遇到過。
今年初開始做自己的網站。用了張透明部分的png圖片做了網站LOGO,心想都什麼年代了,不用考慮IE6了。某天下班回來打開Google Analytics後台,才發現IE6的訪問量居然佔去了總量的40%,嚇了一跳,趕緊從網上下了綠色版的IE6測試自己的網站,果不其然,LOGO完全不透明。
於是連夜上網搜尋解決方案,整體來說網路上的辦法普遍都比較複雜,包括css濾鏡,js,gif替換等。但總覺得不夠漂亮,終於經過一個晚上的查找,找到了一個只需要2句js程式碼便能順利解決的方法。接下來跟大家分享
首先,從我的網站下載iepng.js
http://www. *** .com/templates/default/js/iepng.js
如果你的網站中使用半透明png作為背景的元素id為logo,則在<head></head>之間加入:
<!-- for ie6 png fix --> <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 class為bar,那就該寫成:
EvPNG.fix('.bar"); |
和CSS的語法是一樣的,OK,希望能和大家繼續交流網站架設技巧。
本文由甜妞網(www.hers99.com)站長旺仔原創,轉載請註明出處
感謝旺仔的投稿