使用jQuery设置顶部页边距垂直对齐分隔符

Question

谁能告诉我我哪里错了.我使用(窗口).height设置顶部页边距来垂直对齐div。625是Div居中的高度...

这在火狐中是有效的，但是直到你调整浏览器窗口的大小，IE7才会设置页边距。

测试地点在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

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

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

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 );

}); 

Answer 2

我不确定您的实际问题，这就是为什么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函数吗？或者它正在执行，但什么也不做？