需要帮助查找 jquery $(document).ready() 在 firefox 中无法正常工作的错误答案

【问题标题】：Need help finding a bug with jquery $(document).ready() not working properly in firefox需要帮助查找 jquery $(document).ready() 在 firefox 中无法正常工作的错误
【发布时间】：2015-08-23 17:28:02
【问题描述】：

我创建了一个 jquery 函数来设置元素的宽度，以便它填充它的父级中的兄弟姐妹留下的任何额外宽度。（基本上是一个 flexbox）

我在 $(document).ready() 和 $(window).resize() 中都调用了这个函数

HTML

<body>
    <div class='pageCenter'>
        <div class='fixedCol'>my fixed col</div>
        <div class='flexCol'>my flexible col</div>
        <div class='percentCol'>my percent col</div>
    </div>
</body>

CSS

.pageCenter {
    width: 400px;
    max-width: 100%;
    margin: 0px auto;
    overflow: hidden;
    background-color: gray;
}
.fixedCol, .flexCol, .percentCol {
    float: left;
}
.fixedCol {
    width: 100px;
    background-color: green;
}
.flexCol {
    background-color: blue;
}
.percentCol {
    width: 20%;
    background-color: yellow;
}

jquery

// Execute when the document has finished loading
$(document).ready(function () {
    flexColumn();
});

// Execute on window resize
$(window).resize(function () {
    flexColumn();
});

function flexColumn() {
    // with each parent of a .flexCol
    $(".flexCol").parent().each(function (index) {
        var wrapperWidth = $(this).width(); // find its width
        var numFlexCols = $(this).children(".flexCol").size(); // get the number of .flexCol elements that are direct descendants

        // get the total width of all non .flexCol elements that are direct descendants and use it to calculate the remaining space
        var sum = 0.0;
        $(this).children().not(".flexCol").each(function (index1) {
            sum += $(this)[0].getBoundingClientRect().width;
        });
        var freeSpace = wrapperWidth - Math.ceil(sum);

        // divide the remaining space evenly among all .flexCol elements that are direct descendants
        // the fractional components of this division are given to the first .flexCol element so it may end up being 1px larger than the rest
        $(this).children(".flexCol").each(function (index1) {
            if (index1 === 0) {
                $(this).css("width", Math.ceil(freeSpace / numFlexCols));
            } else {
                $(this).css("width", Math.floor(freeSpace / numFlexCols));
            }
        });
    });
}

在 webkit 浏览器中一切正常，但在 Firefox（版本 37.0.1）中，只有来自 $(window).resize() 的调用正常工作。这意味着当您在 Firefox 中加载页面时，它不会自动调整大小，直到您调整窗口大小，然后它就可以正常工作。所以我的问题是为什么我的 flexColumn() 函数在使用 firefox 时仅在 $(document).ready() 调用中不起作用。

这是代码的 jsfiddle： http://jsfiddle.net/metamilo/qjs2an1e/

它实际上在 Firefox 的小提琴中正常运行，但在我的本地 wamp 堆栈上运行时，相同的代码无法正确显示。（可能是个问题）

我尝试使用 $(window).onload() 而不是 $(document).ready() 并且它没有改变。控制台中也不会显示任何错误。

我已经花了将近 8 个小时试图追查这个问题，并且在这里遇到了数百个类似的问题，但我发现我发现有帮助。如果您有任何建议，我将不胜感激，如果您需要我澄清一些问题，请提出。

【问题讨论】：

您是否在 Firefox 调试控制台中看到任何 javascript 错误？
不，甚至没有警告
在文档准备功能之前移动功能和相关功能有帮助吗？
好主意，但我刚刚尝试过，但没有帮助:(
实际上，我将您的所有代码复制粘贴到一个 html 文件中，并在 Firefox 中打开它，它工作正常。你怎么知道你的 document.ready 不能在 Firefox 中运行？

标签： javascript jquery firefox wamp document-ready

【解决方案1】：

好的，所以我知道出了什么问题。事实证明，我的 css 实际上具有 .less 扩展名，因此它被 less.js 解析了大约 16 毫秒，这将初始样式延迟到了 firefox 执行 $(document).ready() 的时间点之后。将其更改为 .css 即可解决问题。

抱歉，我在发布我的问题和代码时没有注意到这一点，感谢您的所有建议。

让我绊倒的总是最愚蠢的小事：/

【讨论】：