为什么jQuery的.height()方法在火狐返回0，Chrome中却能正常获取高度？

核心原因 #

该差异来源于Chrome和火狐对DOM元素尺寸计算的触发规则不同：
你的代码是在遍历.projects__col节点的阶段就提前计算了title的高度，如果执行这段代码时页面还未完成全量渲染（比如关联的图片、自定义字体未加载完成，或是title元素/其父级初始设置了display: none隐藏），Chrome会预计算部分可见性异常元素的尺寸，而火狐仅会对完成排版、处于可见状态的元素返回正确的高度值，未渲染完成的元素高度统一返回0。

可行解决方案 #

方案1：调整代码执行时机 #

把整段代码包裹在window.load事件回调中，该事件会等所有静态资源加载完成、页面完全渲染后才触发，能保证两个浏览器获取到的高度一致：

$(window).on('load', function() {
  $('.projects__col').each(function() {
    const _this = $(this);
    let titleHeight = title.height();
    console.log(titleHeight);

    _this.click(function () {
        _this.css({
            'transform': `translateY(-${titleHeight}px)`,
            '-o-transform': `translateY(-${titleHeight}px)`,
            '-moz-transform': `translateY(-${titleHeight}px)`,
            '-webkit-transform': `translateY(-${titleHeight}px)`,
        });
    });
  });
})

方案2：将高度计算逻辑移入点击事件内部 #

你实际使用高度的场景是点击元素的时候，此时页面已经完成渲染，直接把高度计算挪到click回调里即可：

$('.projects__col').each(function() {
    const _this = $(this);
    _this.click(function () {
        let titleHeight = title.height();
        console.log(titleHeight);
        _this.css({
            'transform': `translateY(-${titleHeight}px)`,
            '-o-transform': `translateY(-${titleHeight}px)`,
            '-moz-transform': `translateY(-${titleHeight}px)`,
            '-webkit-transform': `translateY(-${titleHeight}px)`,
        });
    });
});

其他排查方向 #

如果上述方案无效，可以先排查两个点：

• 检查title元素是否在火狐下被异常设置了height: 0、overflow: hidden这类会影响高度计算的样式
• 如果title用了自定义字体，可以先等字体加载完成后再计算高度，避免字体切换导致的高度计算偏差

内容的提问来源于stack exchange，提问作者monsaic123