Question

我在使用CSS Overlay的IE中遇到这个奇怪的问题我正在申请一个灯箱。基本上，我使用fadein和fadeout进行jquery - 问题是除了IE之外一切正常。

在IE中 - 我没有得到任何褪色 - 而是直接进入不透明背景。

在淡出时 - 它会删除＆lt;的“不透明度”。 1秒后，在删除叠加层之前将页面呈现为“纯色”。

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

Answer 1

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

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

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

Answer 2

也许这对你来说是一个很好的解决方案（对我而言）。解决方案简单但有效（而且非常好）。当它的父级背景没有颜色（完全透明）时，IE存在alpha透明度问题。

我们在这里做的（见下面的例子）是首先添加一个几乎透明的div（对眼睛是透明的）。因为它是画布/容器内的第一个div（例如=＆gt;一个div）并且它被放置为绝对值，所以此div之后的所有内容都将放在第一个div的顶部，因此这将成为所有其他内容的背景这个画布里面的内容。

因为现在有背景，IE在淡入或淡出（更改不透明度时）或将画布的不透明度设置为低于100的值时，不显示令人讨厌的黑点（像素）或黑色区域。

如何 - 以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代码，因为这种“黑客”不会影响其他浏览器。

希望它有所帮助。

Answer 3

还有使用此垃圾浏览器的问题。

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

Answer 4

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

Answer 5

在我观察到这个问题的情况下，我能够使用@Erwinus概述的方法部分修复它。使用这种技术使得光环不那么难看，但仍然可以看到奇怪的黑色光环。

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

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

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

这显然不一定是所有案例的解决方案，但对我来说是可行的并且运作良好。

Answer 6

这是另一个可能解决这个问题的方法... jQuery据说有一些问题（在1.4之前？），通过CSS检测不透明度。如果在动画不透明度（fadeIn，fadeOut，fadeTo和animate）之前使用jQuery设置元素的不透明度，则似乎没有问题。就像在，你既可以使用CSS为支持它的浏览器设置不透明度，然后在使用jQuery设置不透明度的基础上叠加它，然后它应该在IE中正常工作。这也是display none的情况。

示例：

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

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

Answer 7

好的，我遇到了这方面的问题，我在网上找到的解决方案都没有。这让我抓狂，因为如果你看看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运行时没有应用脚本。我将此代码复制到webhost和BAM !,完美地工作。不知道为什么IE8会这样做，但我认为这是开发者不喜欢IE的另一个原因。

也许那就是我。

Answer 8

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

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

点击工具＆gt;兼容性视图设置＆gt;取消显示“在兼容性视图中显示Intranet站点”

的框

为什么在默认情况下启用它我不知道，但是它已经引起了很多麻烦，隔离然后告诉人们修复。

jquery IE Fadein和Fadeout Opacity

8 个答案: