问题现象描述：IE6,IE7下元素使用position:relative无法跟随父级一直滚动 使用的样式与结构如下
|
1 2 3 |
.box{width:300px;height:200px;overflow-x:hidden;overflow-y:auto;} .box ul li{text-align:left;position:relative;line-height:1.3em;} .box ul li span{position:absolute;right:5px;top:0;} |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<div class="box"> <ul> <li><a href="#">标题一</a><span class="time">2010-04-23</span></li> <li><a href="#">标题一</a><span class="time">2010-04-23</span></li> <li><a href="#">标题一</a><span class="time">2010-04-23</span></li> <li><a href="#">标题一</a><span class="time">2010-04-23</span></li> <li><a href="#">标题一</a><span class="time">2010-04-23</span></li> <li><a href="#">标题一</a><span class="time">2010-04-23</span></li> <li><a href="#">标题一</a><span class="time">2010-04-23</span></li> <li><a href="#">标题一</a><span class="time">2010-04-23</span></li> <li><a href="#">标题一</a><span class="time">2010-04-23</span></li> <li><a href="#">标题一</a><span class="time">2010-04-23</span></li> <li><a href="#">标题一</a><span class="time">2010-04-23</span></li> <li><a href="#">标题一</a><span class="time">2010-04-23</span></li> <li><a href="#">标题一</a><span class="time">2010-04-23</span></li> <li><a href="#">标题一</a><span class="time">2010-04-23</span></li> <li><a href="#">标题一</a><span class="time">2010-04-23</span></li> <li><a href="#">标题一</a><span class="time">2010-04-23</span></li> <li><a href="#">标题一</a><span class="time">2010-04-23</span></li> <li><a href="#">标题一</a><span class="time">2010-04-23</span></li> <li><a href="#">标题一</a><span class="time">2010-04-23</span></li> <li><a href="#">标题一</a><span class="time">2010-04-23</span></li> </ul> </div> |
position:relative;
父级 overflow:scroll时，
IE6子级不随滚动条滚动，IE7也没有修改这个BUG
解决方案：父级元素添加 “position:relative;left:0;top:0;”
修复后的实例如下，请使用IE6或IE7查看。
