|
Many people say that IE6 does not support PNG transparency. In fact, IE supports 100% transparent PNG. The crazy IE6 just does not support PNG's Alpha transparency.
This BUG caused us a lot of trouble.
But there are still many problems, such as semi-transparent PNG background images.
Gulu77 has compiled 4 methods for PNG Alpha transparency in IE6:
Test example: http://www.css88.com/demo/IE6_bug/IE6_bug_2/test_IE6png8/index.html
Here we use IE6 to test, and the inserted images and background images are not transparent.
The first method: AlphaImageLoader filter <br />Microsoft provides a solution: http://support.microsoft.com/kb/294714/zh-cn
Usage introduction: Insert filter in each label style:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='scale')
Note:
AlphaImageLoader is difficult to insert image <img src=”.png”/> transparent
The AlphaImageLoader method is used on the background image to achieve the background-image effect
AlphaImageLoader is not supported by IE8. Since IE7 supports AlphaImageLoader, to avoid conflicts, it is recommended to use CSS hack to distinguish them. Only use the test example for IE6: http://www.css88.com/demo/IE6_bug/IE6_bug_2/test_AlphaImageLoader/index.html
Second method: PNG Transparency in IE
Introduction: Relatively simple, using a JavaScript containing a filter to simulate the alpha transparency of an image or background PNG Notes:
The spacer.gif transparent image in the root directory is used as a replacement for the png image. The path of the spacer.gif written in JavaScript can be adjusted as needed.
The PNGTransparncyinIE method can only achieve the effect of background-image in background applications. The background repeated coordinate call cannot be realized for the time being. Official original text: http://codingforums.com/archive/index.php?t-80555.html
Test example: http://www.css88.com/demo/IE6_bug/IE6_bug_2/test_PNGTransparncyinIE/index.html
The third method: IE PNG Fix v1.0 / 2.0 Alpha 3
This is the latest version, and we will focus on introducing a method today.
Usage introduction: The page tag uses behavior:url("iepngfix.htc"); to call the external iepngfix.htc file containing js and css to correct PNG alpha transparency.
Test example 1: http://www.css88.com/demo/IE6_bug/IE6_bug_2/IE6_bug_2.html
Test example 2 (official, e-text): http://www.css88.com/demo/IE6_bug/IE6_bug_2/iepngfix.html
* Support <img src=""> element.
* Supports background PNG images (unlike many other scripts!)
* Support for CSS1 background repeat and position (via optional plugin)
* Background images can be defined built-in or in an external style sheet.
* Automatically handles changes to src/background via normal JavaScript (eg mouseover rollovers) - no special coding needed.
* Changes support includes CSS 'classes' for changing factors.
* Uses automatic adaptation of <a href=”">elements of Papua New Guinea context factors.
* Tiny script (fast downloading).
* Licensed under a Free Software License.
How to use Follow these simple steps to add this to your page:
1. Copy and paste iepngfix.htc and blank.gif into your website folder.
2. Copy and paste the CSS or HTML into your website:
<style type="text/css">
img, div { behavior: url(iepngfix.htc) }
</style>
This CSS selector must contain the tags/content you want PNG to support - basically, give it a comma-delimited list of tags to use. It must also include the correct path. HTC is relative to the HTML file's location (not relative to the CSS file!). For example, yours might look like this:
<style type="text/css">
img, div, a, input { behavior: url(/css/resources/iepngfix.htc) }
</style>
3. If your website uses subfolders, open them. HTC file in a text editor like Windows Notepad and change the blankImg variable to include the correct path to blank.gif like this:
IEPNGFix.blankImg = '/images/blank.gif';
Again the path is relative to the HTML file. Otherwise, you will see a "broken image" graphic!
4. If you want to support CSS1 background-repeat and background-position, be sure to include the extras. js file in your <head>:
<script type="text/javascript" src="iepngfix_tilebg.js"></script>
Otherwise, the background image will work but will not repeat or stand out.
5. You can sit back and enjoy the show in comfort! Maybe consider donating to support the development of this script if you like what you see, because I spent hundreds of hours developing, testing and supporting it :). Also, I would certainly appreciate an inbound link from your site to mine!
Official original text: http://www.twinhelix.com/css/iepngfix/
If you are interested in more information or an alternative way to activate the script while maintaining CSS compliance, see the source code in the demo file.
—————————————————————————–
How to solve common problems
1. I have pasted in the CSS but my pngs are not transparent!
It is important to remember that paths to files are relative to the HTML file, not the CSS file (like CSS background images). If you want to test the path, insert: alert('This works!'); into it. HTC Files.
2. It works offline instead of online.
First try unzipping this preset for demonstration and uploading to the web server as is. If it doesn't work, you probably have a MIME type problem. You have to make sure your server sends the correct MIME type "text/x-component". HTC Files. Try one of these two easy fixes:
3. Uploaded. htaccess file, which downloads the compressed script to the web server, which will make Apache emit the correct MIME type.
4. Instead of calling "IEPNGFIX.HTC" from your CSS, upload IEPNGFIX.PHP in the same folder and call that instead, which also sends out the correct MIME type.
5. My pngs are transparent but have a funny border or red "X" icon.
Check that the blankImg variable is set correctly. HTC files, again corresponding to HTML files, contain PNGs.
The image distorts, or this script breaks, the layout of my page.
When apply to image without setting the dimensions, the script will try and "guess" the correct image dimensions and apply those. If it gets done wrong, give you an explicit image width.
A png'd element that is a link or form element is not clickable.
Test example 1: http://www.css88.com/demo/IE6_bug/IE6_bug_2/IE6_bug_2.html
Test example 2 (official, e-text): http://www.css88.com/demo/IE6_bug/IE6_bug_2/iepngfix.html
Fourth method: IE PNG Fix v1.0 / 2.0 Alpha 3
Usage Introduction: ie7/ie8-js is a JS library that resolves the conflict between IE and W3C standards, making Microsoft's IE behave like a web standard-compliant browser and support more W3C standards.
Official original text: http://code.google.com/p/ie7-js/
Test example: http://www.css88.com/demo/IE6_bug/IE6_bug_2/test_ie7-js/index.html
|
