Question

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

我的问题是动画，当在ie8中观看时看起来很糟糕 - 当动画运行时，文本周围会看到丑陋的黑色边框（看看下面的链接，你会看到我的意思）。

它在FF，Chrome和Safari中完全呈现和动画效果更加复杂。

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

可以查看该页面here

任何想法？

的Si

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

enter code here

Answer 1

这是一个消除锯齿的问题。 IE在动画期间对背景颜色进行抗锯齿处理，在这种情况下为黑色。

尝试对nav课程进行此更改：

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

更新：This post遇到类似问题

Answer 2

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

更新：可选择，只需禁用IE中的淡入淡出，并立即从发光/不发光状态切换，不会产生淡入淡出效果。

Answer 3

您是否尝试过使用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

IE8没有正确动画jQuery菜单

3 个答案: