javascript - 为什么 Mozilla Firefox 不处理正确的 jQuery？

Question

我有一个脚本可以在滚动时保持大表格的行标题和列标题可见。在 IE9、谷歌浏览器、Opera 11 中一切正常，但在 Firefox 6 中，它不工作。行标题没问题，但列标题(标题)乱七八糟。

这是 jsfiddle example .

这是javascript:

function moveScroll() {
    var scroll_top = $(window).scrollTop();
    var scroll_left = $(window).scrollLeft();
    var anchor_top = $("#main_table").offset().top;
    var anchor_left = $("#main_table").offset().left;
    var anchor_bottom = $("#bottom_anchor").offset().top;

    $("#clone").find("thead").css({
        width: $("#main_table thead").width()+"px",
        position: 'absolute',
        left: - scroll_left  + 'px'
    });

    $("#main_table").find(".first").css({
        position: 'absolute',
        left: scroll_left + anchor_left + 'px'
     });

if (scroll_top >= anchor_top && scroll_top <= anchor_bottom) {
    clone_table = $("#clone");
    if (clone_table.length == 0) {
        clone_table = $("#main_table")
            .clone()
            .attr('id', 'clone')
            .css({
                width: $("#main_table").width()+"px",
                position: 'fixed',
                pointerEvents: 'none',
                left: $("#main_table").offset().left+'px',
                top: 0
            })
            .appendTo($("#table_container"))
            .css({
                visibility: 'hidden'
            })
            .find("thead").css({
                visibility: 'visible'
            });
    }
}
else {
    $("#clone").remove();
}
}

$("#main_table")
    .wrap('<div id="table_container"></div>')
    .after('<div id="bottom_anchor"></div>');
$(window).scroll(moveScroll);

有什么解决办法吗？谢谢。

Answer 1

问题源于给你的“克隆”表的 <thead>元素“position:absolute”。如果你把它去掉，它在 Chrome 和 Firefox 中工作正常。

$("#clone").find("thead").css({
    width: $("#main_table thead").width()+"px",
    // position: 'absolute',                     <---- This is the problem
    left: - scroll_left  + 'px'
});

Here is your modified fiddle.