IE8 absolute position + opacity problem

Im having this problem only with IE8 it even works well on IE6!!...

Im appending 2 divs dynamically to the body and absolute positioning them so they get one above the other so it looks like one div... this works ok, untill i make then transparent with

-ms-filter: "progid:DXImageTransform.Microsoft.Alp开发者_C百科ha(Opacity=50)";
filter: alpha(opacity=50);

I made the simplest demo to show the problem: http://anferth.com/tests/divs-problem/

In the demo first appear the two divs without opacity, they look like one, but 1sec after it sets the opacity to 0.5 and the divs get separated by 1px (only in IE8).

The code here: http://jsfiddle.net/messutiEdd/MNPrq/

Thanks in advance

If you have an off-by-one-pixel bug in IE8 that other people can't reproduce, chances are good that you have the page zoomed to something other than the default level. IE doesn't seem to be great at scaling the page in some cases, and so zooming will sometimes cause problems with object positioning and image scaling.

Try resetting your zoom level and see if the problem disappears. I'd guess that (a) there's not a lot you can do about this, and (b) that people who habitually use zoom in IE8 are used to these little issues and probably won't shout about it...

After playing around with your sample i have come up with this:

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

There is still a pixel gap when zoomed to 125%, however this should set you on your way. to get the current zoom factor you will use (IE8) screen.deviceXDPI / screen.logicalXDPI this will return zoom relative to 1. i.e 75% = 0.75, 100% = 1, 125% = 1.25, ect...

Best of luck!