Question

<script type="text/javascript" src="/web/upload/js/jquery-1.8.0.min.js"></script>    
<script type="text/javascript">
    $(function() {
        $(window).scroll(function(){
            var scrollTop = $(window).scrollTop();
            if(scrollTop != 0)
                $('#header').stop().animate({'opacity':'0'},400);
            else    
                $('#header').stop().animate({'opacity':'1'},400);
        });

        $('#header').hover(
            function (e) {
                var scrollTop = $(window).scrollTop();
                if(scrollTop != 0){
                    $('#header').stop().animate({'opacity':'1'},400);
                }
            },
            function (e) {
                var scrollTop = $(window).scrollTop();
                if(scrollTop != 0){
                    $('#header').stop().animate({'opacity':'0'},400);
                }
            }
        );
    });
</script>

我做了一个导航（#header），淡入/淡出取决于滚动和悬停。但仅在IE8中，.png图像和文本都会失真。我不知道该如何解决。

请帮助:(

Answer 1

较旧版本的IE在淡入淡出后呈现非抗锯齿文本。

如果你使用jQuery浏览器插件，你可以在淡入后使用以下行作为一种解决方法，使其有点容忍：

if（$ .browser.msie）{$（'＃header'）[0] .style.removeAttribute（'filter'）; }

Answer 2

在IE6到IE8中，不透明属性不存在。

相反，对于那些旧版本，过滤器：alpha（opactiy：[value]）

例如：http://www.w3schools.com/css/css_image_transparency.asp

布局也可能是个问题。请检查Opacity CSS not working in IE8

的已接听答案

您还可以尝试HTML5 SHIV是否更改了方案。

在IE8中动画不透明度失真

2 个答案: