IE6 PNG 透明 CSS hack 不起作用
我环顾四周，决定使用 CSS 方法而不是依赖 JS...我认为那些坚持使用 IE6 的企业用户也可能被 IT 部门禁用了 JS。
所以在我的 HTML 中，我有：
<!DOCTYPE html PUBLIC "-//W3C//DTD 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>
然后我的 ie6.css 简单地包含：
img
{
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);
}
但是，这些都没有丝毫区别，没有透明度。我注释掉了页面的所有其余部分，所以它实际上就是那个，但仍然没有运气。我删除了 default.css 样式表，但仍然没有区别。
编辑： 我现在开始使用 .htc 方法，在条件 IE6 测试块中加载该文件。事实证明，我遇到的问题是 Windows 7 已“锁定”该文件（我什至不知道这意味着什么），这会阻止 IE 加载/使用它。
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//DTD 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.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
如果我没记错的话，你必须
对每一个图像都使用它，你不能让它只适用于所有图像。
If I'm not mistaken, you must use
for every and each image, you can't make it just work for all images.
我正在使用以下页面的解决方案： IE PNG 支持
按照在线演示在线演示一步步进行，您的png在以下位置也将是透明的IE。
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.
在 HTML 页面中，您有相对于 HTML 文件 (
media/logo.png) 的图像路径，在default.css中您有一个带有的条目行为： url(iepngfix.htc);（iepngfix.htc 的路径相对于 HTML 文件）并且在ie6.css中，您有一个带有filter 的条目： progid:DXImageTransform.Microsoft.AlphaImageLoader(src='media/logo.png', sizingMethod='scale');以及相对于 CSS 文件的图像路径。至少您需要更改 iepngfix.htc 中的路径 (IEPNGFix.blankImg = 'media/blank.gif';)您需要具有以下文件夹结构：
In the HTML page you have the path to the image relative to the HTML file (
media/logo.png) in thedefault.cssyou have an entry withbehavior: url(iepngfix.htc);(path to the iepngfix.htc is relative to the HTML file) and in theie6.cssyou have an entry withfilter: 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:
您可能想看看 http://www.dillerdesign.com/experiment/DD_belatedPNG/
它还允许您使用具有 alpha 通道的 png 和 CSS
background-position属性，而在使用 AlphaImageLoader 时通常不能这样做。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-positionproperty, which you can't usually, when using AlphaImageLoader.