IE8 不能正确地为 jQuery 菜单设置动画答案

【问题标题】：IE8 not animating jQuery menu properlyIE8 不能正确地为 jQuery 菜单设置动画
【发布时间】：2010-11-10 22:57:36
【问题描述】：

我真的很头疼。我编写了一个小而简单的菜单，它采用了由 jQuery 提供支持的简单动画（淡入/淡出）。

我的问题是，在 ie8 中查看动画时看起来很糟糕 - 当动画运行时，文本周围会出现大而难看的黑色边框（看看下面的链接，你会明白我的意思）。

由于它在 FF、Chrome 和 Safari 中的渲染和动画效果绝对完美，因此问题更加复杂。

现在，正如您从页面中看到的那样，我是一位经验丰富的 Web 开发人员，因此非常习惯 IE 的怪癖，但我找不到这个特定问题的原因。

页面可以查看here

有什么想法吗？？

硅

编辑：根据要求，可以下载 CSS（尽管您可以使用 Firebug 看到它）here

enter code here

【问题讨论】：

我最喜欢的部分：“现在，正如您从页面中看到的那样，我是一位经验丰富的 Web 开发人员”

标签： jquery css animation internet-explorer-8

【解决方案1】：

我认为您遇到了 IE8 png 褪色问题。与简单的不透明度滤镜结合使用时，它不会正确混合半透明的 png 像素。要将不透明度滤镜与半透明 png 结合使用，您必须使用 oldschool AlphaImageLoader 滤镜。我认为旧的 IE6 修复程序仍然可以在 IE8 中修复此问题：http://www.twinhelix.com/css/iepngfix/

更新：可选地，只需禁用 IE 中的淡入淡出并立即从发光/不发光切换，没有淡入淡出效果。

【讨论】：

嗯，是这样想的。已经尝试过 twinhelix 修复，但似乎不再适用于 IE8（Grrr！）。真的不想删除淡入淡出，因为我的大多数访问者都将使用 IE，并且非常想推广这种东西。现在考虑省点麻烦，我会将菜单图像重新格式化为 JPG 并在另一次修复 PNG...有时我真的非常讨厌 IE！！！

【解决方案2】：

您是否尝试过使用AlphaImageLoader Filter？它支持 IE 5.5+ 的 PNG 透明度。这可以让您保留 PNG 而不必求助于 JPG。

我不完全确定您的代码的结构，但请尝试this：

<!-- This DIV is the target container for the image.  -->
<div style="position:absolute; left:140px; height:400; width:400;
     filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
     src='image.png', sizingMethod='scale');" >
</div>

对于其他 IE 开发解决方案，请将此作为书签：http://msdn.microsoft.com/en-us/ie/default.aspx

【讨论】：

会看看这个。同时重新格式化图像并保存为JPG。现在效果很好（查看原始链接以查看最终结果）。感谢所有出色的帮助家伙 Si
看起来不错！那么您是否只是使用 IE 的条件来加载 JPG？
不，所有浏览器都运行相同的代码。将 PNG 更改为 JPG 并更新 CSS 消除了 IE 问题，现在它在所有浏览器中都可以正常工作。不过还是讨厌 IE！！！
哦，是的...我完全同意。我有一个正在处理的项目，我必须找到并解决与我合作的公司内部网页的所有问题，以便一切都可以跨浏览器和操作系统运行……所有内部页面都是专门为 IE6 编写的。

【解决方案3】：

这是一个抗锯齿问题。 IE 在动画期间对背景颜色进行抗锯齿处理，在本例中为黑色。

尝试对您的 nav 类进行此更改：

.nav  {
    background: #D0D0D0 url("../images/menu_plain_top.png") no-repeat scroll 0 0;
}

更新：This post 有类似的问题

【讨论】：

你能解释一下别名的概念吗？
Sonny，听起来不错，但已经添加了修改，甚至尝试添加相同的背景颜色值，但没有效果。也不知道为什么 IE 认为背景颜色是黑色的......在 style.css 文件中它显然设置为#D0D0D0......
我应该说“抗锯齿”。我更新了我的帖子。这是一篇内容丰富的文章：szafranek.net/works/articles/font-smoothing-explained
@Simon S - 正在调查。我以前处理过这个问题，我认为背景颜色是问题。
桑尼，不确定这是否有帮助，但我认为这可能是 PNG 问题。我在 Photoshop 中将图像保存为 PNG-24 以保持透明度。已将其重新保存为带有合适背景层的 JPG，问题似乎已经消失 - 现在有更多关于图层排序的问题，但我想我可以解决这些 - 这听起来合理吗？我知道 IE 在处理 PNG 方面存在一些严重问题...