使用jQuery垂直对齐Div以设置margin-top

Question

谁能告诉我哪里出错了...我正在使用以下内容通过设置margin-top来垂直对齐div，使用（window）.height。 625 是被居中的 Div 的高度...

这在 Firefox 中有效，但 IE7 在您调整浏览器窗口大小之前不会设置 margin-top。

测试地点在http://guylloyd.co.uk

任何想法都会非常感激！

马丁

jQuery.noConflict();
jQuery(document).ready(function () {

jQuery(function(){   
var $marginTop = ((jQuery(window).height() - 625) / 2 + 'px');
if(jQuery(window).height() > 625){
jQuery('body').css({'margin-top': $marginTop});   
}
});

jQuery(window).resize(function(){
var $marginTop = ((jQuery(window).height() - 625) / 2 + 'px');
if(jQuery(window).height() > 625){
jQuery('body').css({'margin-top': $marginTop});
}
});

});

Answer 1

我不确定您的实际问题，这就是为什么 IE7 在您调整窗口大小之前不会设置边距，但您可以考虑减少像这样的冗余代码：

function doResize() {
    var $marginTop = ((jQuery(window).height() - 625) / 2 + 'px');
    if(jQuery(window).height() > 625){
        jQuery('body').css({'margin-top': $marginTop});
    }
}

jQuery.noConflict();
jQuery(document).ready(doResize);
jQuery(window).resize(doResize);

对于 IE，如果您在方法中添加一些警报语句，以便知道它们何时被调用，会发生什么情况。 IE7 没有执行 document.ready 函数吗？还是它正在执行，但什么也没做？

Answer 2

你真的不需要使用jquery来以那种方式布局内容，简单的css和xhtml可以达到同样的效果。

这可能是一个与 IE6 相同的问题，它会导致 javascript 执行延迟，尝试包括超时和对 Seth 设计的代码的调用

function doResize() {   
    var $marginTop = ((jQuery(window).height() - 625) / 2 + 'px');   
    if(jQuery(window).height() > 625){   
        jQuery('body').css({'margin-top': $marginTop});   
    }   
}  
//when document has been fully loaded
jQuery(document).ready(function()
{
    setTimeout('doResize()', 1 );

});