css непрозрачность не работает корректно в IE 6/IE7 или IE8 в режиме совместимости

Question

В следующем коде первое и второе изображения с якорями имеют ссылки, а в этих изображениях текст подписи не скрывает (непрозрачность 0) при загрузке страницы в IE 6/IE7 или IE8 в режиме Comp. Все остальные изображения работают нормально, но мне нужно только ссылки в них.

Вот код в JSfiddle

FF работает отлично и IE8 в нормальном режиме, а также отлично

Я бы разместить весь код здесь, но его довольно долго, и у меня была проблема, делая это.

ДОБАВЛЕНО код расслоение плотной

$(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); 

Answer 1

Это hasLayout bug. Вы можете это исправить, добавив zoom: 1 в свой div.wrapper CSS декларации класса:

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

Fix in action here.

Answer 2

Попробуйте это, по крайней мере, 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

Answer 3

IE befo версия 8 не поддерживает официальную реализацию непрозрачности. В то время как официальная версия

opacity: [0..1] 

реализации в IE до версии 8 (и, следовательно, режим совместимости в IE8, который действует как IE7) это

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

Answer 4

попробовать этот CSS

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

и добавить класс с JQuery

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