Sou*_*ter 36 jquery internet-explorer png
如您所知,IE6有一些错误,如果不使用非标准样式的过滤器,则无法显示半透明的PNG文件.在IE7中,此问题已得到修复.但它仍然有一些关于PNG文件的错误.它无法正确显示淡入淡出的半透明PNG文件.使用半透明PNG文件在jQuery中使用show/hide功能时,您可以清楚地看到它.图像的背景显示为不透明的黑色.
你有任何想法通过使用jQuery解决这个问题.
更新
我们来看看我的测试
如您所见,IE8始终错误地显示PNG-24图像.而且,当我淡入淡出(jQuery.fadeOut函数)时,IE8仍能正确显示PNG-8图像.但是,当我同时淡化和调整大小(jQuery.hide函数)时,它会错误地显示PNG-8图像.
PS.您可以从此处下载我的测试源代码.
谢谢,
Ale*_*ias 21
嘿,我不知道你是否还在寻找答案.几天前,我有同样的问题,动画一个带有PNG图像的div.我尝试了很多解决方案,唯一一个工作正常的解决方案是我自己编写的解决方
问题似乎是IE缺乏不透明度支持和正确的PNG支持,所以它在应用不透明效果后打破了PNG显示(我相信动画框架依赖于专有的IEIE过滤器"AlphaImageLoader"对IE的不透明效果).奇怪的是(对我来说仍然不太了解)是这个问题可以使用相同的过滤器来解决,以在动画之前加载图像.
我写了一个简单的javascript,将过滤器应用于扩展名为.PNG的每个图像.我的动画在IE上运行正常.
我复制下面的代码.我是框架独立的(它是纯JavaScript),但是你必须将它放在框架的DOM ready事件中(或者像我一样使用domready.js).
var i;
for (i in document.images) {
if (document.images[i].src) {
var imgSrc = document.images[i].src;
if (imgSrc.substr(imgSrc.length-4) === '.png' || imgSrc.substr(imgSrc.length-4) === '.PNG') {
document.images[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='crop',src='" + imgSrc + "')";
}
}
}
如果你工作得很好并且动画顺利运行,请告诉我.亲切的问候!
HTML
<img src="image.png" class="iefix" width="16" height="16" />
在CSS中
.iefix
{
/* IE hack */
background:none\9; /* Targets IE only */
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader();
}
简单,快速,漂亮:)
问题的根本原因似乎是Micrsoft IE对PNG alpha透明度的支持不足(在任何版本的IE中).到目前为止IE6是最糟糕的攻击者,将alpha透明像素渲染为淡蓝色.IE7和IE8处理PNG alpha透明度,但无法处理改变PNG中alpha透明像素的不透明度 - 它们呈现为黑色而不是透明.
我自己的修复程序取决于具体情况.以下是一些方法:
有条件的评论:
<!-- in index.html, in the <head>: -->
<!--[if IE 6]>
<link rel="stylesheet" src="css/ie6only.css" />
<![endif]-->
在CSS中:
/* ie6only.css */
img { behavior: url("js/iepngfix.htc"); }
通过JavaScript检测:
<script defer type="text/javascript">
if(navigator.appName == "Microsoft Internet Explorer")
{ /* Do IE-specific stuff here */ }
else
{ /* Non-IE-compatible stuff here */ }
</script>
iepngfix.htc行为的工作原理是将PNG替换为空白图像(blank.gif),然后使用Microsoft的DXImageTransform例程将PNG作为过滤器加载到空白图像上.还有其他的PNG修复程序可以通过在div或span中包装东西来工作,但是那些通常会破坏你的布局,所以我避免使用它们.
希望这可以帮助.
我已经为IE 6/7/8修复了这个问题.
粗略看起来像这样:
<div class="wrapper">
<div class="image"></div>
</div>
...
/* I had to explicitly specify the width/height by pixel */
.wrapper
{
width:100px;
height:100px;
}
.image
{
width:100%;
height:100%;
background:transparent url('image.png') no-repeat;
/* IE hack */
background:none\9; /* Targets IE only */
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="image.png", sizingMethod="crop");
}
...
$(".wrapper").fadeOut('slow');
请注意,"filter"属性仅隐式地以IE为目标.
小智 2
为什么不尝试使用 PNG8。PNG8 与 GIF 文件格式一样被广泛认为是完全透明的。然而，使用 Fireworks 导出时，它可以像 PNG24 一样是半透明的。优点是 IE6 以半透明像素显示 PNG8，因为它是 GIF - 或完全透明，但 IE7 和 8 将其正确显示为 PNG24，如果您使用 jQuery 或任何 js 库淡入淡出它，它将不会显示背景与灰色，因为它不使用著名的 -filter 属性。
| 归档时间： |
|
| 查看次数： |
80273 次 |
| 最近记录： |