css opacity not working correctly in IE 6 / IE7 or IE8 in Compatibilty mode
문제
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);
해결책
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.
다른 팁
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])
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
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')
...