26

我在 IE 中遇到了这个奇怪的问题，我正在申请一个灯箱。基本上，我将fadeinandfadeout用于 jquery - 问题是一切正常，除了IE.

在 IE 中——我没有淡入淡出——而是直接进入不透明背景。

在淡出时 - 它会在 < 1 秒秒内移除“不透明度”，并在移除覆盖之前将页面呈现为“纯色”。

有谁知道如何修复这个错误？它真的很烦人 - 我正在使用所有正确的过滤器等它只是 IE 中的淡入和淡出？

4

8 回答 8

48

我在 IE8 中遇到了同样的问题。在我调用fadeIn() 之前在JavaScript 中设置DIV 的不透明度解决了这个问题：

$('.overlay').css('filter', 'alpha(opacity=40)');
$('.overlay').fadeIn(500);

这只是使用普通的 DIV 而不是透明的 PNG。

于 2009-08-24T14:04:29.930 回答
6

也许这对你来说是一个很好的解决方案（对我来说是）。解决方案简单但有效（而且非常好）。当 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-27T19:48:39.457 回答
0

没有确切的代码很难说，但我知道 IE 在元素上应用淡化有问题，position: relative所以如果我是你，我会检查你试图淡化的元素，无论是直接还是通过他们的父母，是否已经position: relative应用。希望能帮助到你。

于 2009-12-09T22:21:44.050 回答
0

也有使用这个垃圾浏览器的概率。

您还可以检查浏览器何时是 IE 而不是.animate({opacity:0})您将不得不使用的.animate({opacity:'hide'}).

于 2009-10-19T09:13:22.717 回答
0

@LoveMeSomeCode（我无法直接回复您的帖子，因为 stackoverflow 显然认为我需要 X 数量的声誉，因为我可以回复某人的消息 - 为什么？！？！）我相信这是因为 IE8 附带的一个非常蹩脚的功能“兼容性视图”（是的，甚至比模式本身更薄）。

我注意到人们在查看我在工作中开发的网站时（在 IE 上）时会出现各种奇怪的行为。玩了一段时间后，我发现 IE8 有一个设置，即 OUT-OF-THE-BOX 将所有本地页面设置为在兼容性视图中显示！无论您的文档声明或标记有多严格，IE8 都会对所有 Intranet 页面使用兼容性视图（我认为 localhost 是相同的）。

单击工具 > 兼容性视图设置 > 取消选中“在兼容性视图中显示 Intranet 站点”框

为什么默认启用此功能我不知道，但它在隔离然后告诉人们修复时造成了很多麻烦。

于 2011-02-09T13:36:35.443 回答
0

在我观察到这个问题的情况下，我能够使用@Erwinus 概述的方法部分修复它。使用那一招，光晕的丑陋程度大大降低了，但还是能看到一股诡异的黑色气息。

我能够为图像本身应用背景，

#slideshow img{background:#FFF url("image/background-of-slideshow.jpg") no-repeat -15px -35px;}

这完美地解决了这个问题。我把它放在通过条件注释包含的 iefix.css 文件中。它不需要额外的 HTML，并且提供了比其他解决方案更好的淡入淡出效果。

这显然不一定是所有情况的解决方案，但对我来说是可行的并且效果很好。

于 2010-07-22T20:23:50.833 回答
0

这是此问题的另一个潜在解决方案... jQuery 应该有一些问题（在 1.4 之前？）通过 CSS 检测不透明度设置。如果在对不透明度进行动画处理（fadeIn、fadeOut、fadeTo 和 animate）之前使用 jQuery 设置元素的不透明度，它似乎没有问题。如中，您既可以使用 CSS 为支持它的浏览器设置不透明度，然后也可以使用 jQuery 设置不透明度，然后它应该在 IE 中正常工作。这也是显示无的情况。

例子：

$('#element').css("opacity","0").fadeIn("slow");

来源：http ://www.boagworld.com/forum/comments.php?DiscussionID=3555#Item_3

于 2010-08-09T08:45:56.113 回答
0

好的，我遇到了这个问题，我在网上找到的解决方案都没有奏效。这让我发疯，因为如果您查看 W3C 站点：http ://www.w3schools.com/Css/css_image_transparency.asp ，它在 IE8 中工作。但是我将它复制到我的开发环境中它没有。

我有这个代码：

 <script type="text/javascript">
       $(document).ready(function() {
        $('.disabled').fadeTo("slow", 0.33);
  });
 </script>

这个标记：

    <a href='homestarrunner.com' class='disabled'>
<img src='http://www.w3schools.com/Css/klematis.jpg' /></a>

它适用于 FF、Chrome，除了 IE8 之外的所有东西。

我们最终意识到 IE8 在针对 localhost 运行时没有应用脚本。我将此代码复制到网络主机和 BAM！，完美运行。不知道为什么 IE8 会这样做，但我认为这是开发人员不喜欢 IE 的又一个原因。

也许这只是我。

于 2011-01-20T20:15:10.743 回答