通过偏移数学居中在非 webkit 浏览器中不起作用

Question

代码： http://jsfiddle.net/LPF85/6/

在 FF、IE7 和 IE9 中（我测试过的唯一不运行 WebKit 的浏览器），似乎 left 属性要么总是设置为 0，要么在 IE 的情况下设置为负数。

我的定位代码完全基于文档的尺寸。

function open_img_in_face_box(id, width){
    max_width = $j(document).width();
    max_height = $j(document).height();
    padding = 150;

    passed_width = width || (max_width - (2 * padding));

    var img = $j('#' + id); 
    dom_img = document.getElementById(id); 

    $j(document).bind('reveal.facebox', function() { 
        $j("#facebox .image img").width(passed_width);
    })
    // display 
    jQuery.facebox({ 
        image: img.attr('src')
    });

    // center and adjust size
    var aspect_ratio = img.width() / img.height();
    var img_width = passed_width;
    var img_height = passed_width / aspect_ratio;

    window_center_y = max_height / 2;
    window_center_x = max_width / 2;

    offset_y = window_center_y - (img_height / 2);
    offset_x = window_center_x - (img_width / 2);

    var fbx = $j('#facebox');
    fbx.css('position', 'absolute');
    fbx.css('left', offset_x + 'px !important');
    fbx.css('top', offset_y + 'px !important');
    fbx.css('margin-left', 'auto');
    fbx.css('margin-right', 'auto');

}

margin-left 和 margin-right 在这里似乎没有做任何事情，我对此很满意，因为左边的数学应该适用于所有浏览器，对吗？ （这只是数学）

facebox / lightbox 的目标是水平和垂直居中。

Answer 1

为什么你首先要以编程方式计算位置？如果用户调整页面大小怎么办？这可以通过纯 CSS 轻松完成。

我不太明白你的 jsFiddle （或者我没有看到同样的事情？）所以我只会给你这个脚本： http://jsfiddle.net/minitech/8U4Ke/ 可以根据需要进行修改。它被注释。 ;)

现在可以轻松隐藏和显示 - 隐藏、淡出 .overlay。要显示，请淡入。要更改内容，请替换 .popup 中的 HTML。随意添加关闭框之类的东西。