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（）：垂直滚动条出现？

回答

相关问题