Question

我正在开发一个图库，它在Chrome / Firefox / IE11 / IE10中运行良好，但IE9 / IE8存在问题。

我使用fancybox显示图库，当图库打开时，图像会显示效果，如果图像采用不透明度：0.1，以下屏幕截图显示了我的意思。

如果浏览器小于Ie10，我会向HTML提供此类lt-ie10

CSS代码

html:not(.lt-ie10) .fancybox-image { 
   z-index:1;   
   -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity:0;
   -moz-opacity:0; 
} 

.ie_gallery .fancybox-image , .lt-ie10 .fancybox-image {  
   z-index:1;
   -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=1)" !important;
   filter: alpha(opacity=1) !important;
   opacity:1 !important;
   -moz-opacity:1 !important; 
}

JS代码

    $('.product-image a.fancybox').fancybox({
        closeEffect: 'fade',
        afterLoad : function() {
            $("#product .product-image img").addClass('fancylarge');
            if($('ul.mycarousel li').length > 1) $('.fancybox-inner').before('<i class="arrow_right fancy arrow"></i>').before('<i class="arrow_left fancy arrow"></i>');
            $('<div class="loading"></div>').clone().appendTo($('.fancybox-skin'));
            var ie = false;
            if (navigator.userAgent.match(/msie/i) || navigator.userAgent.match(/trident/i) ) ie=true;
            if(!ie){
                $(".fancybox-inner").load('null',null,function(){$(".fancybox-image").css('top',($('.fancybox-inner').height()-$(".fancybox-image").height())/2).animate({opacity:1});});
            }else{
                $('body').addClass('ie_gallery');
            }
        },
        beforeClose: function() {
            $("#product .product-image img").removeClass('fancylarge');
            $('.fancybox-skin .mycarousel-hide').remove();
            $('.fancybox-skin .mycarousel-hide').removeClass('large_width');
        }
    });

Answer 1

IE不透明度过滤器使用0-100范围而不是0-1范围，因此您对不透明样式的过滤器应如下所示：

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);

目前它们被设置为1％不透明度，这使它们看起来完全消失了。

如果浏览器是ie10，则图像显示淡出

1 个答案: