<!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=gb2312" />
<title>无标题文档</title>
<style>
body{
margin:0 auto;
width:860px;
}
div#Prod_list_box{
width:150px;
height:150px;
position:relative;
border:1px solid #e8ecf2;
padding-top:5px;
padding-left:5px;
padding-right:1px;
padding-bottom:1px;
float:left;
}
div#Prod_list_box2{
width:150px;
height:150px;
border:1px solid #e8ecf2;
float:left;
padding:5px 5px 1px 1px;
margin-left:10px;
}
div#Prod_list_box .been-used{
position:absolute;
width: 71px;
height: 71px;
top:0;
right:0px;
background:url(/blog/0001.png) no-repeat ;
_background:url(/blog/0001.gif) no-repeat ;
}
</style>
</head>
<body>
<div id="Prod_list_box">
<img src="H005263_S.jpg" width="145" height="145" />
<div class="been-used"></div>
</div>
<div id="Prod_list_box2" >
<img src="H005263_S.jpg" width="145" height="145" />
</div>
</body>
</html>
在IE7下正常，IE6下Prod_list_box2就窜位，重叠。
主要原因在于IE6在body继承模式下，子div中的position:relative;不生效，当缩小窗口后，就会发生重叠的现象，但刷新后就会变得正常。
解决的办法是在prod_list_box2外，再套一层div，设置外层为relative，内层为static 就可以了。
<!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=gb2312" />
<title>无标题文档</title>
<style>
body{
margin:0 auto;
width:860px;
}
div#Prod_list_box{
width:150px;
height:150px;
position:relative;
border:1px solid #e8ecf2;
padding-top:5px;
padding-left:5px;
padding-right:1px;
padding-bottom:1px;
float:left;
}
#none
{
position:relative;
}
div#Prod_list_box2{
position:static;
width:150px;
height:150px;
border:1px solid #e8ecf2;
float:left;
padding:5px 5px 1px 1px;
margin-left:10px;
}
div#Prod_list_box .been-used{
position:absolute;
width: 71px;
height: 71px;
top:0;
right:0px;
background:url(/blog/0001.png) no-repeat ;
_background:url(/blog/0001.gif) no-repeat ;
}
</style>
</head>
<body>
<div id="Prod_list_box">
<img src="H005263_S.jpg" width="145" height="145" />
<div class="been-used"></div>
</div>
<div id="none">
<div id="Prod_list_box2" >
<img src="H005263_S.jpg" width="145" height="145" />
</div>
</div>
</body>
</html>
