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

IE8 absolute position + opacity problem

本文关键字：不透明度 问题 位置 IE8      更新时间：2023-09-26

我只在IE8上有这个问题，它甚至在IE6上也能很好地工作!

我动态地将两个div添加到body并对它们进行绝对定位，这样它们就会一个在另一个之上，看起来就像一个div…直到我用

将其设置为透明
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);

我做了一个最简单的演示来展示这个问题:http://anferth.com/tests/divs-problem/

在演示中首先出现了两个不透明度的div，它们看起来像一个，但在将不透明度设置为0.5后1秒，div被分开1px (仅在IE8中)。

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

Thanks in advance

如果你在IE8中有一个别人无法复制的像素误差，那么很有可能你把页面放大到默认水平以外的水平。IE在某些情况下似乎不太擅长缩放页面，因此缩放有时会导致对象定位和图像缩放问题。

尝试重置你的缩放级别，看看问题是否消失。我猜:(a)你对此无能为力，(b)习惯在IE8中使用变焦的人已经习惯了这些小问题，可能不会大声嚷嚷…

在摆弄了你的样本之后，我得出了这个:

    $(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，等等。

祝你好运!
相关文章：