IE6 PNG-transparency CSS hack not working
I looked around and decided to use a CSS approach rather than rely on JS... I figure the kind of corporate users stuck with IE6 might also have JS disabled by IT departments.
So In my HTML I have:
<!DOCTYPE html PUBLIC "-//W3C//D开发者_如何学运维TD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>My Page</title>
<link rel="stylesheet" type="text/css" href="default.css" />
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="ie6.css"><![endif]-->
</head>
<body>
<img src="media/logo.png"/>
</body>
Then my ie6.css consists simply of:
img
{
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);
}
However none of this makes the slightest difference, no transparency. I commented out all the rest of the page so it is literally that one and still no luck. I removed the default.css stylesheet and still no difference.
EDIT: I now got it working, using the .htc method, loading that file in a conditional IE6 test block. It turned out the problem I was having was that Windows 7 had 'locked' the file (I don't even know what this means) and this blocked IE from loading/using it.
If I'm not mistaken, you must use
progid:DXImageTransform.Microsoft.AlphaImageLoader(src='yourimage.png')
for every and each image, you can't make it just work for all images.
I am using the solution of following page: IE PNG support
Following the online demonstration online demonstration step by step, your pngs will be transparent also in IE.
In the HTML page you have the path to the image relative to the HTML file (media/logo.png) in the default.css you have an entry with behavior: url(iepngfix.htc); (path to the iepngfix.htc is relative to the HTML file) and in the ie6.css you have an entry with filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='media/logo.png', sizingMethod='scale'); with the path to the image relative to the CSS file. And at least you need to change the path in the iepngfix.htc (IEPNGFix.blankImg = 'media/blank.gif';)
You need to have following folder structure:
- HTML file
- iepngfix.htc
- ie6.css
- default.css
- /media/logo.png
- /media/blank.gif
You would probably like to take a look at http://www.dillerdesign.com/experiment/DD_belatedPNG/
It also allows you to use pngs with alpha-channel with CSS background-position property, which you can't usually, when using AlphaImageLoader.
加载中,请稍侯......
精彩评论