`
jpw2409
  • 浏览: 13916 次
最近访客 更多访客>>
社区版块
存档分类
最新评论

IE6,7局部滚动条中元素position:relative或绝对定位滚动无效BUG

    博客分类:
  • html
阅读更多
.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;}

<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查看。
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics