为什么jQuery脉动效果会在IE中留下锯齿状文本?

当我使用jQuery UI的脉动效果时,我发现脉动会留下锯齿状的文字…经过一些搜索后,它似乎是一个IE错误…我认为它可能与不透明度有关,但我不确定。

我尝试了以下但它不起作用:

$(detail).effect("pulsate", { times: 1 }, 200, function(){ $(this).removeAttr('opacity'); }); 

有谁知道一个工作? 我在这里搜索并发现了与fadeinfadeout类似的问题……列出的解决方案是删除filter属性。 但我也尝试了这个,它似乎没有用。 如果我删除了样式属性然后它可以工作,但后来我放松了我的定位:-)

谁有这个问题?

对于脉动和fadein和fadeout等同样的修复是什么? 我必须承认,我似乎没有得到fadein和fadeout的问题。

Pulsate是我的问题,但它在Firefox中完美运行。

这是Internet Explorer的一个众所周知的问题。 归结为:IE对元素的不透明度没有任何内置支持。 jQuery试图通过使用“filter”来掩盖这一点,filter是一种特定于IE的function,其中一个元素被渲染成一个屏幕外的图像,然后该图像由一些插件代码处理,最终的图像被插回到页面并在(大致)与原始元素相同的位置渲染。 它……主要是有效的。 但是当绘制到该图像上时,文本不会消除锯齿。

根据您使用的字体,结果可能只是丑陋,完全不可读。

请参阅:

  • IE正在失去ClearType
  • JQuery切换函数在IE中呈现奇怪的文本(丢失ClearType?)

你的解决方案实际上很接近 您需要做的是删除’filter’属性,而不是’opacity’属性:

 $(detail).effect("pulsate", { times: 1 }, 200, function(){ $(this).removeAttr("filter"); }); 

这将在脉动完成后恢复您的文本。

仅供参考,对于任何不透明度<100%的PNG图像,都会发生这种情况。 当不透明度<100%时,IE无法正确处理这些区域的合成,这可能也是清除类型渲染中断的原因。

只需在CSS中与背景匹配的淡化元素中添加“背景颜色”,然后就不会出现疯狂的锯齿状边缘。 为我带来了魅力。

如果你让不透明度非常接近于零但是从来没有一直到零,它是否有效?

我开始怀疑IE人员是否会因为这些挑战而开始降低视觉体验。 开发人员可能只是为那些不那么难的浏览器保存好东西。

它真的那么重要吗? 我必须同意Nosredna的观点,如果你坚持使用IE,那么你将不得不接受像这样的古怪渲染。

否则,如果您重新应用已删除的样式属性,以获得定位,该怎么办? 它肯定是一个黑客,但如果删除和重新应用样式元素可以强制重绘或其他东西。

我找到了类似的东西,其中Pulsate离开了不透明样式,这超出了先前CSS中设置的不透明度。 这是在FireFox 8中,带有jQuery UI 1.8.16。 Mark的原始代码适用于一个小修改:

 .removeAttr('style') 

而不是’不透明’。 如果你有任何其他硬编码风格,那么它也会被删除。