网站地图    收藏   

主页 > 前端 > 网站SEO >

IE局部滚动条中元素position:relative或绝对定位滚动

来源:自学PHP网    时间:2014-12-11 18:05 作者: 阅读:

[导读] 问题现象描述:IE6,IE7下元素使用position:relative无法跟随父级一直滚动...

问题现象描述:IE6,IE7下元素使用position:relative无法跟随父级一直滚动

使用的样式与结构如下
.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查看。

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论