Firefox中的jQuery .append（）：垂直滾動條出現？

我想了一些資料覈實的動態添加到目標DIV在我的頁面.append（），然後設置其高度和位置，以便他們都在頁面上可見，且不會滾動。Firefox中的jQuery .append（）：垂直滾動條出現？

所有這一切都變好了，但在Firefox（3.6.16在Ubuntu）出現一個垂直滾動條，彷彿每一個新的DIV的高度都被添加到頁面內容的總高度 - 即使每一個新的DIV靠近屏幕的頂部，其高度並不接近屏幕的長度。 Ubuntu Chrome的表現很好。在追加新的DIV後，當我向jQuery詢問目標DIV的高度時，它沒有改變。

這裏的大部分頁面的代碼測試頁，我寫了隔離問題 - 在此先感謝！

 <style type="text/css"> 
     #target { 
      width: 50px; 
      height: 50px; 
      background-color: #cfc; 
     } 
    </style> 
    <script> 
     $(document).ready(function() { 
      var cols = new Array('#660', '#606', '#066', '#993', '#939', '#399', '#cc9', '#c9c', '#9cc', '#ffc', '#fcf', '#cff'); 

      for(i = 0; i < 10; i++){ 
       $('#target').append('<div id="new_' + i + '">Hello</div>'); 
       $('#new_' + i) 
       .position({ 
        my: 'left top', 
        at: 'left top', 
        of: '#target', 
        offset: '' + (i * 20) + ' ' + (i * 10) 
       }) 
       .width(200) 
       .height(150) 
       .css('background-color', cols[i]); 
      } 
     }); 
    </script> 
</head> 
<body> 
    <div id="target"> 
    </div> 
</body>

來源

2011-04-29 user548958

您是否嘗試過加入'溢出：隱藏;'到'＃target'元素？ – Seth 2011-04-29 12:33:51

好要追加不超過150個像素高，以這50個像素高的元素的元素。你爲什麼不**期望滾動條？ – Pointy 2011-04-29 12:40:09

喜尖 - 滾動條出現在瀏覽器窗口中作爲一個整體，而不是我的小50px的DIV。 – user548958 2011-04-29 14:40:53

如果要給添加<div>元素「的立場：絕對的」，那麼你會得到沒有滾動條。

jQuery UI「.position（）」實用程序會給受影響的元素（您添加的<div>元素）「position：relative」，如果它們沒有以「position」設置。以這種方式定位的元素消耗頁面上的佈局空間，就好像它們是從而不是移開它們的「自然」位置。因此，當您添加所有這些元素（即使它們被重新定位以使它們都適合）時，該頁面會溢出。

通過給他們「的立場：絕對的」，你把他們與衆不同的佈局流程。 Chrome對此並不認同，原因我不明白;我認爲Firefox實際上是在做正確的事情。（編輯 —如果您添加一行以將最後一個<div>追加到「目標」，並使其只是一個純文本<div>，其中只有少量文本，但根本沒有定位，那麼您會看到它最終結束你會得到一個與Firefox相同大小的滾動條，因此，看起來Chrome並沒有「聲稱」幻像空間，除非它真的出現了。）

Here是一個jsfiddle。更新後的代碼（一個額外的行）：

$(document).ready(function() { 
     var cols = new Array('#660', '#606', '#066', '#993', '#939', '#399', '#cc9', '#c9c', '#9cc', '#ffc', '#fcf', '#cff'); 

     for(i = 0; i < 10; i++){ 
      $('#target').append('<div id="new_' + i + '">Hello</div>'); 
      $('#new_' + i) 
      .position({ 
       my: 'left top', 
       at: 'left top', 
       of: '#target', 
       offset: '' + (i * 20) + ' ' + (i * 10) 
      }) 
      .css('position', 'absolute') 
      .width(200) 
      .height(150) 
      .css('background-color', cols[i]); 
     } 
    });

來源

2011-04-29 12:52:47 Pointy

美麗，感謝 - 我用我的CSS文件中的類定義，以便我所有新創建的DIV有絕對的位置，它完美的作品。一個非常好的，明確的答案。 – user548958 2011-04-29 14:43:21

您可以包括所有的在css()功能的東西......

演示：http://jsfiddle.net/wdm954/xSYBr/

var cols = new Array('#660', '#606', '#066', '#993', '#939', '#399', '#cc9', '#c9c', '#9cc', '#ffc', '#fcf', '#cff'); 

for(var i = 0; i < 10; i++){ 
    $('#target').append('<div id="new_' + i + '">Hello</div>'); 
    $('#new_' + i).css({ 
     backgroundColor: cols[i], 
     position: 'absolute', 
     left: i * 20 + 'px', 
     top: i * 10 + 'px', 
     width: '200px', 
     height: '150px' 
    }); 
}

來源

2011-04-29 13:07:39 wdm

Firefox中的jQuery .append（）：垂直滾動條出現？

回答

相關問題