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

【问题标题】：Why does the jQuery pulsate effect leave jagged text behind in IE?为什么 jQuery 脉动效果会在 IE 中留下锯齿状文本？
【发布时间】：2009-06-14 18:03:04
【问题描述】：

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

我尝试了以下方法，但它不起作用：

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

有人知道变通办法吗？我在这里搜索，发现fadein 和fadeout 存在类似问题...列出的解决方案是删除过滤器属性。但我也试过这个，它似乎没有用。如果我删除 style 属性，那么它会起作用，但是我会失去定位:-)

有人遇到过这个问题吗？

对于脉动的修复与淡入和淡出等是否相同...？我必须承认我似乎没有遇到淡入淡出的问题。

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

【问题讨论】：

标签： jquery internet-explorer jquery-ui

【解决方案1】：

您的解决方案实际上很接近。您需要做的是删除“过滤器”属性，而不是“不透明度”属性：

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

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

仅供参考，这将发生在任何不透明度

【讨论】：

【解决方案2】：

只需在 CSS 中与背景匹配的褪色元素中添加一个“背景颜色”，就不会出现疯狂的锯齿状边缘。对我很有魅力。

【讨论】：

【解决方案3】：

这是 Internet Explorer 的一个众所周知的问题。归结为：IE 并没有真正对元素的不透明度提供任何内置支持。 jQuery 试图通过使用“过滤器”来掩盖这一点，这是一种 IE 特有的功能，其中一个元素被渲染成一个离屏图像，然后该图像由一些插件代码处理，最终图像插入回页面并呈现在（大致）与原始元素相同的位置。它...主要是有效的。但是在该图像上绘制文本时不会消除锯齿。

根据您使用的字体，结果可能从丑陋到完全不可读。

请看：

IE is losing ClearType

JQuery toggle function rendering weird text in IE (losing ClearType?)

【讨论】：

谢谢 .. 我通过在完成动画后删除 Filter 属性来做到这一点 .. 不理想但现在可以使用..
谢谢，第一个链接对我很有帮助。

【解决方案4】：

如果你让不透明度非常接近于零，但从不完全为零，它会起作用吗？

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

【讨论】：

绝对！ IE用户得到方角、难看的透明度等。

【解决方案5】：

真的那么重要吗？我不得不同意 Nosredna 的观点，如果你坚持使用 IE，那么你将不得不接受这种古怪的渲染。

否则，如果您重新应用已删除的样式属性以恢复定位，该怎么办？这肯定是一种 hack，但如果删除并重新应用样式到元素可能会强制重绘或其他东西。

【讨论】：

不是开发者坚持IE，而是用户坚持。而且这个问题在IE8中依然存在。

【解决方案6】：

我发现了一个类似的事情，Pulsate 离开了不透明度样式，它覆盖了之前 CSS 中设置的不透明度。这是在 FireFox 8 中，带有 jQuery UI 1.8.16。 Mark 的原始代码只需稍作修改即可使用：

.removeAttr('style')

而不是“不透明度”。缺点是，如果您有任何其他硬编码样式，它也会被删除。

【讨论】：