在兼容模式下，IE 6/IE7或IE8中的css opacity无法正常工作

在以下代码中，带锚点的第一个和第二个图像具有链接，并且在这些图像中，IE中页面加载时标题文本不会隐藏（不透明度为0） 6/IE7或IE8处于Comp模式。所有其他图像工作正常，但我需要，但在他们的链接。在兼容模式下，IE 6/IE7或IE8中的css opacity无法正常工作

这里是JSfiddle

代码FF工作正常，IE8在正常模式下是罚款以及

我会在这里发布整个代码，但其相当长，我遇到了麻烦，这样做。

加js代码

$(window).load(function(){ 
//for each description div... 
$('div.description').each(function(){ 
    //...set the opacity to 0... 
$(this).css('opacity', 0); 
    //..set width same as the image... 
    $(this).css('width', $(this).siblings('img').width()); 
    //...get the parent (the wrapper) and set it's width same as the image width... ' 
    $(this).parent().css('width', $(this).siblings('img').width()); 
    //...set the display to block 
    $(this).css('display', 'inline-block'); 
}); 
$('div.wrapper').hover(function(){ 
    //when mouse hover over the wrapper div 
    //get it's children elements with class descriptio 
    //and show it using fadeTo 
    //$(this).children('.description').show(); 
    $(this).children('.description').stop().fadeTo(500, 0.7); 
},function(){ 
    //when mouse out of the wrapper div 
    //use fadeTo to hide the div 
    $(this).children('.description').stop().fadeTo(500, 0); 
}); 
});

它似乎不喜欢这样......

$(this).css('opacity', 0);

来源

2010-09-12 user357034

可能的重复http://stackoverflow.com/questions/3654842/greying-out-a-button-from-code-behind-does-not-work-in-ie/3654874#3654874 – RPM1984 2010-09-13 00:04:30

这是一个hasLayout bug。您可以通过添加zoom: 1您div.wrapper类CSS声明修复：

div.wrapper{ 
    zoom: 1; 
    position:relative; 
}

修复in action here。

来源

2010-09-13 00:30:28 Pat

哇，很好找!!!!!永远不会有这样的。 $＃@ $ @ $ @ $ IE＃@ $ @＃$ @ – user357034 2010-09-13 00:36:04

男人，好作品Pat ./ \。 – d2burke 2010-09-13 00:45:03

有什么想法触发了它？ – user357034 2010-09-13 00:55:40

尝试这些至少IE7和8：

.opaque1 { // for all other browsers 
    opacity: .5; 
} 

.opaque2 { // for IE5-7 
    filter: alpha(opacity=50); 
} 

.opaque3 { // for IE8 
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; 
} 




$(this).css(
    { 
    'opacity': 0, 
    '-ms-filter':"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)", 
    'filter': 'alpha(opacity=50)' 
    });

UPDATE编辑使用他的代码来自jsbin

来源

2010-09-12 23:50:57 d2burke

那么，根据官方opacity spec在OP8中运行。兼容模式中的IE8与IE7几乎相同，所以'.opaque2'应该覆盖它。 – 2010-09-12 23:52:39

它不能在ie8兼容模式下工作 – user357034 2010-09-12 23:53:37

好吧我在JSfiddle中尝试过它，仍然不能工作，前两个标题仍然存在 – user357034 2010-09-13 00:04:41

IE befo重新版本8不支持不透明的官方实现。虽然官方版本是

opacity: [0..1]

8版本之前，IE的实现（因此，IE8的兼容模式，它的作用就像IE7）是这个

filter: alpha(opacity=[0..100])

来源

2010-09-12 23:51:48

试试这个CSS

.transparent { 
    filter:alpha(opacity=50); 
    -moz-opacity:0.5; 
    -khtml-opacity: 0.5; 
    opacity: 0.5; 
}

和add class whith JQuery

$('div.description').each(function(){ 
    //...set the opacity to 0... 
$(this).addClass('transparent') 
...

来源

2010-09-13 00:14:17 jcubic

我直接添加了CSS到描述类，但仍然无法正常工作。 http://jsfiddle.net/vAMyh/7/，为什么当你添加链接确实表现如此？难倒！ – user357034 2010-09-13 00:32:28

在兼容模式下，IE 6/IE7或IE8中的css opacity无法正常工作

回答

相关问题