Because I have some web page production skills, I have heard a long time ago that translucent PNG files will have display problems under IE6, but since I have never had my own website, I have never really encountered it.
I started building my own website at the beginning of this year. I used a png picture with a transparent part to make the website LOGO. I thought it was old enough and there was no need to consider IE6. One day when I came back from get off work and opened the Google Analytics backend, I discovered that IE6 visits actually accounted for 40% of the total visits. I was shocked and quickly downloaded the green version of IE6 from the Internet to test my website. As expected, the LOGO was completely opaque.
So I searched online all night for solutions. Generally speaking, the online methods are relatively complicated, including css filters, js, gif replacement, etc. But I always felt it wasn't beautiful enough. Finally, after a night of searching, I found a method that only required 2 sentences of js code to solve the problem smoothly. Let’s share it with you next
First, download iepng.js from my website
http://www. *** .com/templates/default/js/iepng.js
If the element ID of your website that uses a semi-transparent png as the background is logo, add the following between <head></head>:
| <!-- for ie6 png fix --> <script type="text/javascript" src="templates/js/iepng.js"></script> <script type=text/javascript> EvPNG.fix('#logo');</script> |
Finally, let me explain, if you use a transparent png as the background of the div id foo, then it should be written as:
| EvPNG.fix('#foo'); |
If you use a transparent png as the background of a div class of bar, then it should be written as:
| EvPNG.fix('.bar"); |
The syntax is the same as CSS, OK. I hope to continue to exchange website building skills with you.
This article was originally created by Wang Zai, the webmaster of Tianniu.com (www.hers99.com). Please indicate the source when reprinting.
Thank you Wangzi for your contribution