2

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

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

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

这是供您使用的 jsfiddle http://jsfiddle.net/comparebest/z2Nyn/1/

现在解决问题：

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

您可能需要缩小浏览器屏幕的大小才能观察此行为。

如何防止 div 在 FF 中消失？

PS：

继承人的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');
});​
4

2 回答 2

4

您面临的问题实际上非常简单，但有点烦人。根据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 选择定位方案：‘位置’属性”

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

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

“ Firefox 是否支持位置：相对于表格元素？ ”

于 2012-10-19T23:37:37.260 回答
2

问题是 Firefox 对表格单元格上的相对定位的支持。请参阅：Firefox 是否支持 position: relative 在表格元素上？

您的修复：
应用于position:relative包含<table>标签，以便表格是定位上下文，而不是单元格。

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

于 2012-10-19T23:35:44.433 回答