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

Question

我创建了一个 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 中加载页面时，它不会自动调整大小，直到您调整 window 的大小，然后它才能正常工作。所以我的问题是为什么我的 flexColumn() 函数在使用 firefox 时仅在 $(document).ready() 调用中不起作用。

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

它实际上在 firefox 中的 fiddle 中正常运行，但当在我的本地 wamp 堆栈中运行时，完全相同的代码无法正确显示。（也许这是一个沼泽问题）

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

我花了将近 8 个小时试图追踪这个问题，并在这里经历了数百个类似的问题，但注意到我发现有帮助。如果您有任何建议，我将不胜感激，如果您需要我澄清一些问题，请直接询问。

Answer 1

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

抱歉，我在发布问题和代码时没有听清，感谢您的所有建议。

让我失望的总是最愚蠢的小事:/

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

Need help finding a bug with jquery $(document).ready() not working properly in firefox

javascript

jquery

firefox

wamp

document-ready