Question

在FF，IE7和IE9（我测试过的唯一不运行WebKit的浏览器）中，似乎左边的属性总是设置为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。添加关闭框和诸如此类的东西。

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

1 个答案: