jQuery的改變類 - 格在Firefox在Chrome，IE消失，精，Safari瀏覽器

Here我在應該以這種方式行事的權利側邊欄DIV：jQuery的改變類 - 格在Firefox在Chrome，IE消失，精，Safari瀏覽器

1）當你向下滾動頁面和DIV到達瀏覽器屏幕的頂部，這是類更改，它會固定在屏幕頂部，直到您到達div的父元素的底部。

2）一旦div的底部到達父元素的底部，它就會將類更改回非固定位置。

這裏是的jsfiddle您與http://jsfiddle.net/comparebest/z2Nyn/1/

現在的問題發揮：

出於某種原因，在FireFox一次DIV達到父元素，DIV消失的底部，而在Chrome，IE和它保持可見的Safari。

您可能需要縮小瀏覽器屏幕的大小以觀察此行爲。

如何防止div在FF中消失？

P.S：

繼承人的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'); 
});

來源

2012-10-19 Acidon

問題是Firefox的有關表細胞相對定位的支持。請參閱：Does Firefox support position: relative on table elements?

你修復：
應用position:relative到含<table>標記，因此該表是定位方面，而不是細胞。

這應該適用於您的情況，因爲您只有一行單元格，並且它們與表格具有相同的bottom。我能夠在Firebug的網站上使用它;儘管不在你的小提琴中，因爲在該例子中，單元格是而不是與桌子底部對齊。

來源

2012-10-19 23:35:44 Faust

不幸的是'位置：relative'是不夠的，作爲類'bottom'在表的底部放置DIV真 - 在藍色部分的結尾。所以還需要設定另一個值。但仍然和我一樣好，幾乎相同。 :) – insertusernamehere

@insertusernamehere：這對於小提琴來說是真實的，但在實際的網站（看起來像Acidon刪除了他最初發布的鏈接）時，單元格一直延伸到表格的底部。 – Faust

啊很酷 - 我沒有在實際的網站上檢查它。所以，我的不好。當有人一次寫/嘗試相同的東西時，總是很有趣。 :) – insertusernamehere

你面臨的問題其實很簡單，但有點煩人。從CSS的規格2.1它指出：

「位置：相對於」的效果對錶列的基團，表頭的基團，表英尺的基團，表列，表 - column-group，table-column，table-cell和table-caption元素是未定義的。

從W3.org網站：「9.3.1 Choosing a positioning scheme: 'position' property」

因此，即使其他所有瀏覽器使用這個值作爲「預期」，Firefox是不是錯在忽略它。所以你應該考慮一個解決方案，其中父<td> -element style="position:relative;"不是你的「浮動」框的參考。

也許這裏的答案可以幫助你：

「Does Firefox support position: relative on table elements?」

來源

2012-10-19 23:37:37 insertusernamehere

jQuery的改變類 - 格在Firefox在Chrome，IE消失，精，Safari瀏覽器

回答

相關問題