2

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

-斯塔凡

4

5 回答 5

7

淡入淡出jQuery的字体Cleartype问题

是对确切问题的一个非常好的解释。它与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");
});

资源

于 2010-01-28T00:42:21.533 回答
3

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

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

于 2009-03-17T06:49:20.797 回答
2
jQuery.fn.fixClearType = function(){
    return this.each(function(){
        if(typeof this.style.filter  && this.style.removeAttribute)
        this.style.removeAttribute("filter");
    })
}
于 2011-02-11T12:09:16.090 回答
1

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

于 2011-03-22T14:48:13.110 回答
1

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

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

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

如何 - 以 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" width="100" height="100"/>
</div>

使用 jQuery 淡入或淡出图像:

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

这也是可能的:

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

而已!

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

希望能帮助到你。

于 2010-01-28T00:39:22.253 回答