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

Question

在以下代码中，带有锚点的第一张和第二张图像具有链接，并且在这些图像中，标题文本不会在 IE 6 / IE7 或 IE8 Comp 模式下的页面加载时隐藏（不透明度 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 bug。您可以通过在 div.wrapper 类 CSS 声明中添加 zoom: 1 来修复它：

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

修复in action here。

Answer 2

8 之前的 IE 不支持 opacity 的官方实现。而正式版是

opacity: [0..1]

IE 在版本 8 之前的实现（因此，IE8 的兼容模式，其行为类似于 IE7）是这样的

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

Answer 3

至少在 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)'
   });

更新编辑以使用来自 jsbin 的代码

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')
...