IE6 PNG透明度
我怎样才能修复IE6的背景图像的PNG透明度错误？
我喜欢David Cilley前段时间写的Javascript解决scheme。 它脱离了兼容浏览器的方式，可以用于任何你想要的后端。 它仍然需要一个空白的gif图像。
将这些函数添加到您的HTML标题或其他现有的.js包括：
<script type="text/javascript"> function fixPngs(){ // Loops through all img tags for (i = 0; i < document.images.length; i++){ var s = document.images[i].src; if (s.indexOf('.png') > 0) // Checks for the .png extension fixPng(s, document.images[i]); } } function fixPng(u, o){ // u = url of the image // o = image object o.src = 'images/spacer.gif'; // Need to give it an image so we don't get the red x o.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + u + "', sizingMethod='scale')"; } </script> 将下面的条件注释放在底部（页脚部分，位于</ body>之前）：
<!--[if lte IE 6]> <script language="javascript" type="text/javascript"> //this is a conditional comment that only IE understands. If a user using IE 6 or lower //views this page, the following code will run. Otherwise, it will appear commented out. //it goes after the body tag so it can fire after the page loads. fixPngs(); </script> <![endif]-->
为了更全面地了解IE6的奇特点，请尝试使用IE7 Javascript库 。
使用这个： http : //www.twinhelix.com/css/iepngfix/
这对IE 5.5也有好处，但IE浏览器的IE版本或早期版本的IE版本并不适用。
我已经在很less的网站上使用过，并且没有任何问题。
有时在PNG周围会有一个丑陋的灰色框，但是直到剧本开始。
使用PNG行为 。
ie6.css：
img { behavior: url("pngbehavior.htc"); }
page.html中：
<!--[if IE 6]> <link rel="stylesheet" type="text/css" href="ie6.css" /> <![endif]-->
我要去这里找死灵法师的徽章。 🙂
这不完全是一个修复，但我不时使用一个方便的解决方法来支持IE6的透明度，没有任何额外的代码。 它并不总是符合法案，但它往往是这样做的。
这个想法是，大多数情况下，您将需要在固定的颜色背景上显示您的PNG。 一个PNG文件可以有一个指定的背景颜色，IE6会尊重它。 你所做的是你得到了TweakPNG工具，并打开你的PNG文件。 在那里你将能够添加一个bKGD块，它指定所需的背景颜色。 只需input您需要显示PNG的颜色，即可完成。
一个音符 – PNG文件通常包含一些值来补偿不同的显示设备。 有可能是像预期的色彩空间，chromacities，伽马等事情。这本身并不坏，但IE不知何故误解了他们，结果是PNG显示比他们应该已经黑暗（或者IE可能是唯一一个正确的人？我不记得…）
无论如何，如果您希望每个浏览器都显示您的PNG相同，您应该删除与上述实用程序的这些块。
twinhelix PNG修复应该可以帮到你
例如Dean Edwards的ie7.js
请注意，AlphaImageLoader转换可能导致IE6死锁 。
使用PNG8s而不是常规的PNG32s。 你被限制在256色和alpha位的透明度，但它跳动随机死锁浏览器。
你可能会很勇敢，只是说你的网站可能不能很好地在IE6上呈现。 也许不是最具商业头脑的方法，但如果我们让IE6死掉，我们会竭尽全力（甚至微软）。 当然，由于大量的在线活动发生在IE6固定的公司机器上，这种情况不会很快发生。 🙁
1.为您的文档的头块内的IE6添加条件CSS：
<!--[if (IE 6)]> <link rel="stylesheet" type="text/css" href="locationOfyourCss/ie6.css"/> <![endif]-->
2.在元素中分配类名称：
<td class = yourClassName>
3.在ie6.css中，应用filter。 你必须指定宽度和高度。 将背景图像设置为clear.cache.gif，如果没有这些属性，filter将不起作用：
.yourClassName{ width:8px; height:22px; background: url("locationOfBlankImage/clear.cache.gif"); filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='filePath/imageName.png', sizingMethod='scale'); }
我正在从事的项目是从Paul Irish的HTML5 Boilerplate中获得一个提示，并将条件样式分配给整个页面 。 他在这里详细讨论了这个问题 ，但是简单地说，这个想法是在你网站上的每个页面的HTML中添加条件检查，应用到body标签。 像这样：
<!--[if lt IE 7 ]> <body class="ie6 pageStyle"> <![endif]--> <!--[if IE 7 ]> <body class="ie7 pageStyle"> <![endif]--> <!--[if IE 8 ]> <body class="ie8 pageStyle"> <![endif]--> <!--[if IE 9 ]> <body class="ie9 pageStyle"> <![endif]--> <!--[if (gt IE 9)|!(IE)]><!--> <body class="pageStyle"> <!--<![endif]-->
IE浏览器将阅读这些评论，并应用这些风格。 其他浏览器将忽略它。 这个天才是你可以devise符合标准的网站，使用PNG，无论如何。 然后，在你的CSS中，在你的标准样式之后添加额外的样式，以给IE浏览器他们想要的东西。 例如，我正在使用的一种风格使用PNG背景图像。 为了使这个播放在ie6中很好，我可以用javascript / htc来replace它们，应用其中的一个。 或者我可以这样做：
.someStyle { background: url(http://img.dovov.comsomeFile.png) no-repeat; background-position: -0px -280px; } .ie6 .someStyle { background: url(http://img.dovov.comsomeFile.gif) no-repeat; background-position: -0px -280px; }
通过向我的ie6用户提供GIF，没有CPU占用的解决方法过程，如果您曾经testing过可能运行ie6的POS机，这实际上是一个非常大的问题。 而且，我还没有放弃任何质量好的用户与漂亮的浏览器。
它确实需要两个单独的文件，但是我认为这是一个比大多数更干净的实现。 此外，而不是一个单独的ie6.css文件，使用.ie6 .whatever任何保持你的修复接下来的风格，他们适用于，我觉得更清洁，更容易使用。 它也鼓励你去考虑ie6用户，而不是完成你的devise，然后回顾恐怖
这是关于这个问题的一篇很好的文章 。 总之，它提供了一个名为SuperSleight的JS库。 过去我曾经用过它，取得了相当的成功。
好吧，我几乎是新的html / js，但我想我必须改变Rob Allen的答案一点，以解决两个问题：
- AlphaImageLoader（）正在改变我的图像的长宽比，所以我需要恢复图像加载后的原始大小。
- 如果从html末尾调用fixPngs（），在加载文档之后但在加载所有图像之前调用。
所以我改变了我的fixPngs（）来附加一个事件：
function fixPngs() { // Loops through all img tags for(i = 0; i < document.images.length; i++) { var u = document.images[i].src; var o = document.images[i]; if(u.indexOf('.png') > 0) { o.attachEvent('onload', fixPng); o.src = u; } } }
fixPngs（）仍然从html的末尾被调用：
<!--[if lte IE 6]> <script language="javascript" type="text/javascript"> // Do this after the page loads fixPngs(); </script> <![endif]-->
而fixPng（）现在获取调用者，分离事件，保存原始维度，调用AlphaImageLoader（），最后恢复维度：
// u = url of the image // o = image object function fixPng(e) { var caller = e.target || e.srcElement || window.event.target || window.event.srcElement; var u = caller.src; var o = caller; if(!o || !u) return; // Detach event so is not triggered by the AlphaImageLoader o.detachEvent('onload', fixPng); // Save original sizes var oldw = o.clientWidth; var oldh = o.clientHeight; // Need to give it an image so we don't get the red x o.src = 'images/spacer.gif'; o.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+ u +"', sizingMethod='scale')"; // Restore original sizes if(o.style) { o.style.width = oldw +"px"; o.style.height = oldh +"px"; } }
我过度了吗？
