中心div在firefox中垂直跳跃

Question

我创建了一个脚本，让div在屏幕上居中。它在safari中工作正常，但由于某种原因，窗口上的跳转调整大小。我认为是负面的“边缘顶部”加倍。有人对此有经验吗。我没有尝试使用chrome或ie。

// PART B
function cent() {
var $block = $("#block"),
    margintop = parseInt($block.height() / -2);
console.log('called');
$('#block').css("margin-top", margintop);
};

$(document).ready(function(){
cent();
});
$(window).resize(function(){
cent();
});

网站网址： www.thebackroads.com.au

Answer 1

如果你记录$block.height()你会看到加载时javascript生成的margin-top与调整大小时不同，因为看起来你的容器实际上有不同的高度。

这可能是由于在DOM未完全加载时进行的第一次cent()调用。或者至少文本容器没有达到它的最终高度，因为您在加载图像时显示预加载器。原因可能是您的外部库。见DOM not fully loaded?

您可以在firebug中清楚地看到这一点，当您计算高度时，您的内容会被隐藏。

在这里阅读一些解决方案：

jQuery: Get height of hidden element in jQuery

Answer 2

或者尝试这个脚本？用窗口高度计算。

function cent() {
    var margintop = ($(window).height() - $('#block').height()) / 2;
    $('#block').css("margin-top", margintop);
};