我在应用光箱的CSS叠加层时,在IE中遇到了奇怪的问题。基本上,我使用jquery的fadeIn
和fadeOut
- 问题在于除了在IE
中以外,其他一切都正常。
在IE中- 我没有出现淡入效果 - 而是直接转换为不透明的背景。
在淡出时- 它会在第一秒内移除<1秒的"不透明度"并渲染页面为"实心颜色",然后移除叠加层。
有人知道如何解决这个错误吗?这真的很烦人 - 我使用了所有正确的过滤器等等,只是在IE中的淡入和淡出?
我在应用光箱的CSS叠加层时,在IE中遇到了奇怪的问题。基本上,我使用jquery的fadeIn
和fadeOut
- 问题在于除了在IE
中以外,其他一切都正常。
在IE中- 我没有出现淡入效果 - 而是直接转换为不透明的背景。
在淡出时- 它会在第一秒内移除<1秒的"不透明度"并渲染页面为"实心颜色",然后移除叠加层。
有人知道如何解决这个错误吗?这真的很烦人 - 我使用了所有正确的过滤器等等,只是在IE中的淡入和淡出?
我曾在IE8中遇到同样的问题。在调用fadeIn()之前,在JavaScript中设置DIV的不透明度解决了这个问题:
$('.overlay').css('filter', 'alpha(opacity=40)');
$('.overlay').fadeIn(500);
这是使用普通 DIV 而不是透明 PNG。
<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>
$("#mycanvas").fadeIn("slow", function()
{setTimeout(function(){$("#mycanvas").fadeOut("slow");},2000 );}
);
$("myImage").fadeIn("slow");
就是这样!
好的事情是,这个解决方案也适用于具有alpha透明度的VML/SVG(Raphael)或其他内容。而且你不必改变/破解你的JS代码,因为这个“hack”不会影响其他浏览器。
希望它有所帮助。
好的,我在这方面遇到了问题,但是我在网上找到的解决方案都没有起作用。这让我很疯狂,因为如果你看一下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>
在Firefox、Chrome和其他浏览器中都能正常工作,但在IE8中却不行。
我们最终意识到的是,当针对本地主机运行时,IE8没有应用脚本。我将这段代码复制到Web主机上,嘭!完美地工作了。不知道为什么IE8会这样做,但我认为这是开发人员更加讨厌IE的另一个原因。
也许只有我这样想。
这里有另一个可能解决此问题的方法...据说 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
#slideshow img{background:#FFF url("image/background-of-slideshow.jpg") no-repeat -15px -35px;}
这个方法完美地解决了问题。我将它放在我的iefix.css文件中,通过条件注释进行包含。它不需要额外的HTML,并提供了比其他解决方案更好的淡入效果。
显然,这并不一定是所有情况的解决方案,但对于我的情况是可行的,并且效果很好。
position: relative
元素相关的问题。因此,如果我是你,我会检查你尝试淡化的元素(直接或通过其父元素)是否已应用了position: relative
。希望能有所帮助。@LoveMeSomeCode(我无法直接回复您的帖子,因为stackoverflow显然认为我需要X数量的声望,因为我可以回应某人的消息-为什么?!)我相信这是因为IE8的“兼容性视图”带来了一个非常糟糕的功能(是的,甚至比模式本身还要糟糕)。
我注意到当在IE上查看我在工作中开发的网站时,人们会遇到各种奇怪的行为。经过一些尝试,我发现IE8有一个设置,它默认将所有本地页面设置为显示兼容性视图!无论您的文档声明或标记有多严格,IE8都将对所有内部网页使用兼容性视图(我想localhost也是一样)。
单击“工具”>“兼容性视图设置”>取消选中“在兼容性视图中显示内部网站”的框。
为什么这个默认启用我不知道,但它已经引起了很多麻烦,需要隔离然后告诉人们如何修复。
还有一个问题,就是使用这个垃圾浏览器时会出现问题。
如果浏览器是IE,你可以检查一下,而不是使用.animate({opacity:0})
,你将需要使用.animate({opacity:'hide'})
。