Chrome：首次加载时未设置 jQuery 高度

Question

我在 Chrome 中遇到了一个奇怪的错误 ONLY，当通过 jQuery 设置高度时，加载时无法正确设置高度。刷新浏览器时会在加载时设置高度，但是当您打开新标签或第一次导航到页面时，高度没有正确设置：

错误：

正确：

这是我的代码：

jQuery(document).ready(function ($) {
    var $grid = $(".tile-grid"),
        $homeGrid = $(".home"),
        $boxes = $grid.find("section"),
        $window = $(window);

    function resizeBoxes() {
        var boxWidth = $boxes.first().not(".active").outerWidth();
        $boxes.css("height", boxWidth);
    }

    function main() {
        $window.on("resize", function() {
            resizeBoxes();
        });
        resizeBoxes();
    }
    main();
});

经过进一步调查，我发现该函数已执行，但每个框的高度都设置为9px，这似乎表明动画可能对此负责。但是当我删除所有动画时，我仍然得到相同的结果......

我该如何解决这个问题？

Answer 1

我在页面加载时使用 jquery 给你设置 div 高度的 jsfiddle。

请访问此小提琴。(jsfiddle.net/cPHe4/2/)在页面加载时更改 Div 的高度。我想这会对你有所帮助。

谢谢。