2

我正在尝试通过传递偏移量将一个元素与另一个元素垂直对齐。它在 Chrome 中排成一行，但 FF / Safari 将它推得比它应该的更远......例如：http ://campaignreport2012.rogerhutchings.co.uk/cinema-verite/

function headalign() {
    var original_offset = ( $("#header").offset() );
    var custom_offset_top = ( $(".wp-post-image").offset().top );
    var custom_offset_left = ( $("#header").offset().left );

    if ( $(window).width() > 768 ) {
        $("#maintitle").offset({
            top: custom_offset_top,
            left: custom_offset_left,
        });
    } else {
        $("#maintitle").offset( original_offset );
    }   

}

if ( $("body").hasClass("single") ) {
    headalign();
    $(window).resize(function() { headalign(); });
}

它在调整大小时会重新计算它，但在第一次加载时它太低了。谁能帮我吗？

4

1 回答 1

3

作为正确答案（而不是评论）：

您的 javascript 在浏览器收到后立即执行。根据该脚本在文档中的位置，这甚至会在 DOM 完全加载之前发生。

$(document).ready(function(){ headalign(); });会在 DOM-load 上执行你的函数。但此时，图像和“BlockGothic”字体均未呈现。因此custom_offset_top是0或其他一些值（没有图像，没有自定义字体）。

您需要等到页面完全呈现：

$(window).load(function(){ headalign(); });

这会导致您的"#maintitle". 您可以首先“修复”隐藏"#maintitle"并在呈现页面后将其淡入：

CSS：

#maintitle {
    display: none;
}

javascript:

$(window).load(function(){
    headalign();
    $("#maintitle").fadeIn(200);
});

希望这有帮助！

于 2012-09-04T10:11:31.420 回答