Question

我试图通过传递偏移来垂直地将元素与另一个元素对齐。它在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(); });
}

它在调整大小时重新计算它，但在第一次加载时它太远了。任何人都可以帮助我吗？

Answer 1

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

您的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);
});

希望这有帮助！

jQuery偏移在Firefox / Safari中返回错误

1 个答案: