Chrome 和 Firefox 上的窗口宽度错误

Question

我有以下代码：

function c() {
        var h = ($(window).height() - $('#maincontainer').outerHeight()) / 2;
        var w = ($(window).width() - $('#maincontainer').outerWidth()) / 2;

        $('#maincontainer').css('position', 'absolute');
        $('#maincontainer').css('top', h);
        $('#maincontainer').css('left', w);
    }

    $(window).resize(c);
    $(window).load(c);

resize 事件在我尝试过的每个浏览器上都能正常工作，但load 总是返回 8px 的宽度值，将maincontainer div 放在屏幕的左边框上。 这仅在 IE8 上正确执行，在窗口中间放置一个 div，在 Chrome 22 和 Firefox 16 上失败。

编辑： 似乎有效的解决方案：

    $(window).ready(c);
    $(window).load(c);
    $(window).resize(c);

另外，the body 应该有 width: 100%。

Answer 1

代替：

$(window).resize(c);
$(window).load(c);

做：

$(function(){
    c();
    $(window).resize(c);
});

发生的情况是您在加载任何内容之前询问文档的大小，因此您（几乎）什么也得不到。这会在文档“准备就绪”后立即执行，从而为您提供更有用的价值。

您可能还需要将身体的宽度和高度设置为 100%，并使用该尺寸而不是窗口。