css opacity not working correctly in IE 6 / IE7 or IE8 in Compatibilty mode

Question

In the following code the first and second images with anchors have links and in these images the caption text does not hide (opacity 0) on page load in IE 6 / IE7 or IE8 in Comp mode. All other images work fine but I need to but links in them.

Here is the code in JSfiddle

FF works fine and IE8 in normal mode is fine as well

I would post the whole code here but its rather long and I was having trouble doing so.

ADDED js code

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

It seems to not like this...

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

Answer 1

It's a hasLayout bug. You can fix it by adding zoom: 1 to your div.wrapper class CSS declaration:

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

Fix in action here.

Answer 2

IE before version 8 doesn't support the official implementation of opacity. While the official version is

opacity: [0..1]

IE's implementation before version 8 (and hence, IE8's compatibility mode, which acts like IE7) is this

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

Answer 3

Try these for at least IE7 and 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 edited to use his code from jsbin

Answer 4

try this css

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

and add class whith JQuery

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