使用 jQuery 时 Internet Explorer 7 中的褪色问题

Posted 2023-03-06

【中文标题】使用 jQuery 时 Internet Explorer 7 中的褪色问题

【英文标题】：Fading issues in Internet Explorer 7 when using jQuery

【发布时间】：2010-10-13 17:31:06

【问题描述】：

我在我正在开发的网站上使用 jQuery，一切正常 - 除了 Internet Explorer 7（和以前的版本，但该网站不支持它们）。 在 Safari 或 Firefox 中查看http://dev.staffanestberg.com/fromsweden/，然后在 IE7 中查看，您就会明白我的意思。我目前正在使用内置效果 FadeTo 来淡化内容，但我也尝试过创建自定义效果以及同时使用 Show/Hide、Animate 和 FadeUp/FadeDown。 我也在这个站点上使用 SWFaddress，这可能会导致与 IE7 结合使用时出现错误，但在其他浏览器中不会也出现这种情况吗？ 我错过了什么？

-工作人员

【问题讨论】：

您的链接返回 404 Not Found。

【参考方案1】：

我发现，最有效的方法是简单地应用背景...将其视为 GIF。所以没有jQuery。纯 CSS

【参考方案2】：

jQuery.fn.fixClearType = function()
    return this.each(function()
        if(typeof this.style.filter  && this.style.removeAttribute)
        this.style.removeAttribute("filter");
    )

【参考方案3】：

jQuery 淡入淡出的字体清除类型问题

This 是对确切问题的一个非常好的解释。 它与 IE 中的 clear type 字体有关。 这是我使用的修复方法。

示例：

// This causes this text glich
$("#message").fadeIn();

// This will fix it
document.getElementById("#message").style.removeAttribute("filter");

修复就是去掉过滤器。

$('#message').fadeIn(function()
    this.style.removeAttribute("filter");
);

Source

【讨论】：

这为我解决了一个类似的问题。很好的答案！

【参考方案4】：

也许这对你来说是一个很好的解决方案（对我来说是）。解决方案简单但有效（而且非常好）。当 IE 的父级背景没有颜色（完全透明）时，IE 会出现 alpha 透明度问题。

我们在这里所做的（见下面的例子）是首先添加一个几乎透明的 div（对眼睛来说是透明的）。因为它是画布/容器中的第一个 div（例如=> 一个 div）并且它是绝对放置的，所以这个 div 之后的所有内容都将放在第一个 div 的顶部，所以这成为所有其他内容的背景在这个画布里面。

因为现在有了背景，IE 在淡入或淡出（更改不透明度时）或将画布的不透明度设置为低于 100 的值时不会显示令人讨厌的黑点（像素）或黑色区域。

如何 - 以 100x100 图像为例：

<div id="mycanvas" style="display:none;">
<div style="position:absolute; background:#FFF; display:block; filter:alpha(opacity=1); opacity:0; width:100px; height:100px;">
</div>
<img id="myImage" src="example.png"  />
</div>

使用 jQuery 淡入或淡出图像：

    $("#mycanvas").fadeIn("slow", function() 
setTimeout(function()$("#mycanvas").fadeOut("slow");,2000 );
);

这也是可能的：

$("myImage").fadeIn("slow");

就是这样！

不错的是，此解决方案也适用于 VML/SVG (Raphael) 或其他具有 alpha 透明度的内容。此外，您不必更改/破解您的 JS 代码，因为这种“破解”不会影响其他浏览器。

希望对你有帮助。

【参考方案5】：

我已经成功地让 show/hide、fadeTo、fadeUp 和 fadeDown 在 IE6 及更高版本中工作。我发现我在涉及显示元素的动画中遇到的很多问题都与加载时没有隐藏的相关元素有关。

尝试在 html 中或以编程方式将淡入的元素（表格或 div）设置为 style="display:none"。

【讨论】：

我想我现在有了一个解决方案，在 SWFaddress 的作者的帮助下。他在该脚本中提到了一个 sn-p，它可能会导致 IE7 中的错误（最有可能与 jQuery 结合使用）。我删除了它，内容淡入，虽然它没有抗锯齿。但这是另一个问题:)

是的，别名可能是由于 ClearType，它与 IE 不兼容。

由于清除类型，肯定只需要删除过滤器。我举了一个例子。