opacité css ne fonctionnent pas correctement dans IE 6 / IE7 ou IE8 en mode Compatibilité

Question

Dans le code suivant les première et seconde images avec des ancres et ont des liens dans ces images le texte de la légende ne cache (opacité 0) à la page charge dans IE 6 / IE7 ou IE8 en mode Comp. Toutes les autres images fonctionnent bien, mais je dois, mais des liens en eux.

Voici le code dans jsFiddle

FF fonctionne bien et IE8 en mode normal est bien aussi

Je signalerait tout le code ici, mais son assez longue et j'avais du mal à le faire.

code de AJOUTÉE

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

Il semble pas comme ça ...

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

Answer 1

Il est un bug hasLayout. Vous pouvez y remédier en ajoutant zoom: 1 à div.wrapper class déclaration CSS:

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

en action .

Answer 2

IE avant la version 8 ne prend pas en charge la mise en œuvre officielle de l'opacité. Alors que la version officielle est

opacity: [0..1]

La mise en œuvre de IE avant la version 8 (et, par conséquent, le mode de compatibilité de IE8, qui agit comme IE7) est ce

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

Answer 3

Essayez ces pendant au moins IE7 et 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)'
   });

Mise à jour modifié pour utiliser son code à partir jsbin

Answer 4

essayer css

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

et classe add avec JQuery

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