IE8 абсолютная позиция + проблема непрозрачности

Question

У меня эта проблема только с IE8, она даже хорошо работает на IE6 !! ...

Я добавляю 2 div динамически к телу и позиционирую их абсолютно так, чтобы они располагались один над другим, чтобы он выглядел как один div ... это работает нормально, пока я не сделаю затем прозрачным с

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

Я сделал простейшую демонстрацию, чтобы показать проблему: http://anferth.com/tests/divs-problem/

В демо-версии сначала появляются два элемента div без непрозрачности, они выглядят как один, но через 1сек после установки непрозрачности равной 0,5, а элементы div разделяются на 1px ( только в IE8 ).

Код здесь: http://jsfiddle.net/messutiEdd/MNPrq/

Заранее спасибо

Answer 1

Если в IE8 есть ошибка размером в один пиксель, которую другие люди не могут воспроизвести, велика вероятность, что страница будет увеличена до уровня, отличного от уровня по умолчанию. В некоторых случаях IE не очень хорошо справляется с масштабированием страницы, поэтому при масштабировании иногда возникают проблемы с позиционированием объекта и масштабированием изображения.

Попробуйте сбросить уровень масштабирования и посмотреть, исчезнет ли проблема. Я предполагаю, что (а) с этим мало что можно сделать, и (б) люди, которые обычно используют увеличение в IE8, привыкли к этим маленьким проблемам и, вероятно, не будут кричать об этом ...

Answer 2

После игры с вашим образцом я придумал следующее:

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

При увеличении до 125% все еще существует разрыв в пикселях, однако это должно помочь вам в этом. чтобы получить текущий коэффициент масштабирования, вы будете использовать (IE8) screen.deviceXDPI / screen.logicalXDPI это вернет масштаб относительно 1. то есть 75% = 0,75, 100% = 1, 125% = 1,25, т. д.

Удачи!