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

Question

在下面的代码中,带有锚点的第一个和第二个图像具有链接,在这些图像中,标题文本在IE 6/IE7或IE8的页面加载中不会隐藏(不透明度0).所有其他图像工作正常但我需要链接其中.

这是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);

Answer 1

这是一个hasLayout错误.您可以通过添加zoom: 1到div.wrapper类CSS声明来修复它:

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

修复此处的操作.