今天遇到的这个问题其实早在1年前做DNF商城的时候就遇到了，由于ajax的数据加载，导致原本拥有position属性的元素不会自动移动位置，导致原始内容，和ajax 内容叠加。
当然，单单测试position 是不会有问题的。但是这个问题很容易触发。比如说 position 的父标签或者最祖辈标签里有背景。加入机器稍微差点这个时候就会触发。如果机器好点 ，有可能还得加条件。
同样，网上流传的那个清楚浮动的理想方式里面的
CSS代码
- * html .clearfix { height: 1%; }
这个也会引起新能问题。
提供一个测试：
XML/HTML代码
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>bug</title>
- <style>
- /* --------| Clear Fix |--------- */
- * html .clearfix{height:1%; } /*这个是网上流传的清理浮动里面的一个属性，为了展示bug 多余的我去掉了*/
- #hnseverBox{background:url(../../images/newUI/newsc/di.gif) no-repeat;} /*父标签指定一个背景图，不管这个背景图url真确与否。*/
- .openlist {position:relative;} /*这个这个*/
- </style>
- <script src="http://www.dabaii.com/demo/38/jquery.js"></script>
- <script>
- $(function(){
- $('.openlist').each(function(i){
- $(this).click(function(){
- $.ajax({
- url: "http://www.dabaii.com/demo/20100701/test.html",
- cache: false,
- success: function(html){
- $('.time_line').eq(i).html(html).attr('class','time_line');
- }
- });
- })
- })
- })
- </script>
- </head>
- <body>
- <div id="hnseverBox">
- <div class="time_line">ajax数据输出位置</div>
- <div class="clearfix"><a class="openlist" href="###">查看更多</a></div>
- <div class="time_line">ajax数据输出位置</div>
- <div class="clearfix"><a class="openlist" href="###">查看更多</a></div>
- </div>
- </body>
- </html>
试试用你的ie6 测试一下。http://www.dabaii.com/demo/20100701/
注意这个一个测试文件。不要纠结css代码和结构的意义。虽然这个测试文件 这种css 和代码看上去没啥意义，也不符合逻辑。为什么平白无故清浮动？ 为什么A要有position:relative。但是总归有一天会又这样的结构需要这样的css……这里只是展示一下这个bug出现的条件而已。
