在兼容模式下，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無法正常工作

回答

相關問題