IE8绝对位置+不透明度问题

Question

我只在 IE8 上遇到这个问题，它甚至在 IE6 上也能正常工作！！...

我将 2 个 div 动态附加到 body 并绝对定位它们，使它们一个在另一个之上，所以它看起来像一个 div...这可以正常工作，直到我使用透明

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

我做了一个最简单的demo来说明问题：http://anferth.com/tests/divs-problem/

在演示中首先出现了两个没有不透明度的 div，它们看起来像一个，但在将不透明度设置为 0.5 1 秒后，div 之间的间隔为 1px（仅在 IE8 中）。 p>

这里的代码：http://jsfiddle.net/messutiEdd/MNPrq/

提前致谢

Answer 1

如果您在 IE8 中存在其他人无法重现的错误，则很有可能您将页面缩放到默认级别以外的其他内容。 IE 在某些情况下似乎不擅长缩放页面，因此缩放有时会导致对象定位和图像缩放问题。

尝试重置缩放级别，看看问题是否消失。我猜想 (a) 对此您无能为力，并且 (b) 习惯在 IE8 中使用 zoom 的人已经习惯了这些小问题，可能不会大喊大叫...

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 等...

祝你好运！