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的高度。我想这会对你有帮助。

感谢。