IE8 position absolue + problème opacité

Question

Im ayant ce problème uniquement avec IE8 il fonctionne encore bien sur IE6 !! ...

Im 2 annexant divs dynamiquement au corps et absolu en les positionnant afin qu'ils obtiennent un sur l'autre il ressemble à une div ... cela fonctionne bien, jusqu'à ce que je puis faire transparent avec

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; 
filter: alpha(opacity=50); 

J'ai fait la plus simple démo pour montrer le problème: http://anferth.com/tests/divs-problem/

Dans la démo d'abord apparaître les deux divs sans opacité, ils ressemblent à un, mais 1sec af ter il définit l'opacité à 0.5 et les divs sont séparés par 1px (seulement dans IE8).

Le code ici: http://jsfiddle.net/messutiEdd/MNPrq/

Merci à l'avance

Answer 1

Si vous avez un bogue d'un pixel hors-un-pixel dans IE8 que d'autres personnes ne peuvent pas reproduire, il y a de bonnes chances que la page soit agrandie à un autre niveau que le niveau par défaut. Dans certains cas, IE ne semble pas très bien adapté à la mise à l'échelle de la page, et le zoom peut parfois causer des problèmes de positionnement et de mise à l'échelle de l'image. Essayez de réinitialiser votre niveau de zoom et de voir si le problème disparaît. Je suppose que (a) il n'y a pas grand-chose à faire à ce sujet, et (b) que les gens qui utilisent habituellement le zoom sur IE8 sont habitués à ces petits problèmes et ne le croiront probablement pas ...

Answer 2

Après avoir joué avec votre échantillon je suis venu avec ceci:

$(document).ready(function() { 
    $("body").append('<div class="af_sel af_right"></div>'); 
    $("body").append('<div class="af_sel af_bottom"></div>'); 

     var _top = (screen.deviceXDPI/screen.logicalXDPI) < 1 ? 291 : 290; 

     $(".af_sel.af_right").css({ 
      'top': _top , 
      'left': 202, 
      'width': 400, 
      'height': 114 
     }); 

     $(".af_sel.af_bottom").css({ 
      'top': 404, 
      'left': 202, 
      'width': 400, 
      'height': 263 
     }); 

     $(".af_sel").css({ 
     'position': 'absolute', 
     'display': 'none', 
     'z-index': '1000' 
    }); 

    setTimeout(function() { 
     $(".af_sel").show(); 

     setTimeout(function(){ 
      $(".af_sel").css({ 
       'filter': ' alpha(opacity=50)' 
      }); 
     }, 1000); 
    }, 2000); 
    }); 
    window.onresize = function() 
    { 

     var _top = (screen.deviceXDPI/screen.logicalXDPI) < 1 ? 291 : 290; // (screen.deviceXDPI/screen.logicalXDPI) = Zoom Level 

     $(".af_sel.af_right").css({ 
      'top': _top , 
      'left': 202, 
      'width': 400, 
      'height': 114 
     }); 
    } 

Il y a encore un écart de pixels lors d'un zoom à 125 %, cependant cela devrait vous mettre sur votre chemin. pour obtenir le facteur de zoom actuel que vous utiliserez (IE8) screen.deviceXDPI/screen.logicalXDPI cela retournera le zoom par rapport à 1. soit 75% = 0,75, 100% = 1, 125% = 1,25, ect ...

Bonne chance!