jQuery 更改类 - div 在 Firefox 中消失，在 Chrome、IE、Safari 中正常

Question

Here我在右侧边栏中有一个 div，它应该以这种方式运行：

1) 当您向下滚动页面并且 div 到达浏览器屏幕的顶部时，它的类会发生变化，并且会固定在屏幕顶部，直到您到达 div 的父元素的底部。

2) 一旦 div 的底部到达父元素的底部，它的类就会变回非固定位置。

这是 jsfiddle 供你玩 http://jsfiddle.net/comparebest/z2Nyn/1/

现在问题来了：

由于某种原因，在 FireFox 中，一旦 div 到达父元素的底部，div 就会消失，而在 Chrome、IE 和 Safari 中它仍然可见。

您可能需要缩小浏览器屏幕的尺寸以观察此行为。

如何防止div在FF中消失？

附注：

这是 jQuery 代码：

    function fixInParent(selector) {
    var $el = $(selector);

    $(window).scroll(function() {
        if($el.parent().offset().top > $(this).scrollTop())
            $el.addClass('top').removeClass('floating').removeClass('bottom');
        else if ($(this).scrollTop() + $el.height() < $el.parent().offset().top + $el.parent().height())
            $el.addClass('floating').removeClass('top').removeClass('bottom');
        else
            $el.addClass('bottom').removeClass('top').removeClass('floating');
    });
}

$(document).ready(function() {
    fixInParent('#floater');
});​

Answer 1

您面临的问题实际上非常简单，但有点烦人。根据 CSS 2.1 的规范，它指出：

'position:relative' 对 table-row-group、table-header-group、table-footer-group、table-row、table-column-group、table-column、table-cell 和 table 的影响-caption 元素未定义。

来自 w3.org：“9.3.1 Choosing a positioning scheme: 'position' property”

因此，即使所有其他浏览器都将此值用作“预期”，Firefox 忽略它也没有错。因此，您应该考虑一个解决方案，其中带有style="position:relative;" 的父<td>-元素不是您的“浮动”框的参考。

也许这里的答案可以帮助你：

“Does Firefox support position: relative on table elements?”

Answer 2

问题在于 Firefox 对表格单元格上的相对定位的支持。见：Does Firefox support position: relative on table elements?

您的解决方法：
将position:relative 应用于包含<table> 的标签，这样表格就是定位上下文，而不是单元格。

这应该适用于您的情况，因为您只有一行单元格，并且它们与表格具有相同的bottom。我能够让它在你的 Firebug 网站上工作；虽然不在你的小提琴中，因为在那个例子中，单元格 not 与表格底部对齐。