css Opazität nicht richtig in IE 6 / IE7 oder IE8 in Kompatibilitätsmodus arbeitet

Question

Im folgenden Code die ersten und zweiten Bilder mit Anker-Links haben und in diesen Bildern der Titeltext nicht verbergen (Opazität 0) beim Laden der Seite in IE 6 / IE7 oder IE8 in Comp-Modus. Alle anderen Bilder arbeiten gut, aber ich muss aber Links in ihnen.

Hier ist der Code in JSfiddle

FF funktioniert gut und IE8 im normalen Modus ist in Ordnung und

Ich würde den ganzen Code hier posten, aber seine ziemlich lang und ich hatte Schwierigkeiten, dies zu tun.

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

Es scheint nicht so ...

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

Answer 1

Es ist ein hasLayout Fehler . Sie können das Problem beheben, indem zoom: 1 auf Ihre div.wrapper Klasse CSS Deklaration hinzu:

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

in Aktion hier .

Answer 2

IE vor der Version 8 nicht die offizielle Umsetzung der Opazität unterstützen. Während die offizielle Version ist

opacity: [0..1]

IE-Implementierung vor der Version 8 (und somit IE8 Kompatibilitätsmodus, die wie IE7 wirkt) ist diese

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

Answer 3

Versuchen Sie diese für mindestens IE7 und 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 bearbeiten seinen Code zu verwenden, um von jsbin

Answer 4

versuchen, diese CSS

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

und Add-Klasse mit JQuery

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