Question

我在网络浏览器中使用Fadein jquery效果时，整天搜索并尝试删除PNG周围的黑色。我必须遗漏一些东西，因为我使用的所有代码都没有解决它。我的页面可以在这里访问：http://www.kaimeramedia.com/derek/Website

我找到了这段代码：

.item img {
    background: transparent;
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)";
/* IE8 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
/* IE6 & 7 */
    zoom: 1;
}

但是我无法使用我的菜单页面{http://www.kaimeramedia.com/derek/Website/menu.php），它只在index.php模板中看起来正确。

在所有浏览器中，图像都会逐渐淡入和淡出，只是因为IE 6+在它周围放置了一个非常厚的黑色边框。我知道有很多网站讨论这个问题，但我没有运气，或者至少我必须输入错误的代码。

我尝试编辑CSS和下面的样式标签，但似乎没有任何效果：

div.fadehover {
     position: relative;
}

img.b {
     position: absolute;
     left: 0;
     top: 0;

     z-index: 10;
     opacity: 0;
     filter: alpha(opacity=0);
     background: transparent;
}

.style2 {   font-style: italic;     color: #2D6773; }
.style3 {   color: #122833 }

如果有人可以帮助我使用我的网站的工作解决方案，那将非常感激。

Answer 1

这个问题有很多解决方案：
1）使用PNG8代替
2）使用诸如Unit PNG Fix的js脚本 3）尝试将filter: 0添加到您的图片中 4）使用和即过滤后的背景模拟rgba（255,255,255,0）

background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE8 */   
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);   /* IE6 & 7 */      
zoom: 1;

5）最后，如果不需要透明度，只需使用jpg

编辑：这是其中一张图片在png8中的样子，我没有看到任何重大差异...... About PNG8

Answer 2

我有这个完全相同的问题，这是由IE要求的css过滤器属性引起的。在我的动画中，我删除了这个属性。

$（'elem'）。css（'filter'，''）;

旧IE无法执行。您可以使用javascript“破坏”许多IE漏洞，只会导致这些浏览器速度变慢。

最佳解决方案是优雅降级和渐进增强（更多关于http://dev.opera.com/articles/view/graceful-degradation-progressive-enhancement/）。不要让IE做的事情不能或不能做得好。我知道客户很难理解这一点，但我想成为一名魔术师的日子已经过去了。

使用jquery淡入淡出鼠标在IE浏览器中使用PNG黑色

2 个答案: