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查看。
.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查看。
发表评论
-
colgroup-table
2016-05-25 09:35 321<table width="100%" ... -
字母换行
2016-04-19 10:57 394word-break: break-all -
form上的提交
2014-10-21 10:09 297onsubmit 是表单提交时触发 onclick是按钮点击时 ... -
输入关键 鼠标点击自动删除
2014-10-21 10:09 612<input name="" typ ... -
设置ie6下png图片及背景透明的方法 2011-12-1 15:07阅读(1)
2014-10-21 10:10 325设置ie6下png图片及背景透明的方法: (1)微软滤镜法:f ... -
两端对齐
2014-11-20 15:22 462text-align:justify;text-justify ... -
div里的span火狐下不兼容
2014-11-20 15:22 380display:-moz-inline-box;display ... -
一个层垂直居中于浏览器中
2014-11-20 15:22 349<!DOCTYPE html PUBLIC " ... -
导航导航导航导航
2014-11-20 15:23 395<!DOCTYPE html PUBLIC " ... -
路径(链接)
2014-11-20 15:23 324<DIV > ... -
line-height ie6失效
2014-11-25 13:44 355.gwc-border ul .gwc_66{width:11 ... -
控制框架页面或<iframe>内嵌页面在指定页面(区域)打开页面
2014-12-01 13:41 828iframe src="http://zhidao. ... -
固定背景不随滚动条滚动
2014-12-01 13:44 402<BODY style="BACKGROUND ... -
标题 更多
2014-12-01 13:47 289<head> <meta http-equi ... -
图片垂直居中
2014-09-26 14:45 0<head> <title>fdf&l ... -
rows就是行 ie6下li里图片失效解决
2014-09-26 14:45 0rows就是行,cols就是列 .box img { vert ... -
iframe不能全部显示
2014-12-01 13:42 465解决方法:DOCTYPE头部声明去掉就可以了 关键应该在wi ... -
div 换行
2014-12-01 13:42 394<div style="width:100px ... -
fieldset
2014-09-26 14:41 0<style> div{font-size:14p ... -
表格宽度内容自适应
2014-09-26 14:40 0white-space:nowrap; padding:0px ...
相关推荐
这个内容是老生常谈了,主要问题就是IE6不支持 ...造成这个问题的原因是fixed元素的绝对位置是相对于HTML元素,滚动条是body元素的(貌似ie6中他们的区别就是在于滚动条界限那里). 知道了原因,我们就大概知道如何解决了:
用户的屏幕越来越大,而页面太宽的话会不宜阅读,所以绝大部分网站的主体宽度和之前相比没有太大的变化,于是浏览器中就有越来越多的空白区域,所以你可能注意到很多网站开始在滚动的时候让一部分内容保持可见,比如...
IE多彩滚动条 Ver 1.0 (C)Copyright 小鱼儿工作室 2002 免费软件 要VB6运行库的支持。预览功能要装IE5.5(ME默认安装)之后才有效。 IE5.5之后,支持滚动条的CSS,可以制作出彩色的滚动条。不过,...
网页制作用的一个设置IE滚动条 CSS样式的小工具
主要介绍了详解IE6中的position:fixed问题与随滚动条滚动的效果的相关资料,希望通本文能帮助到大家,需要的朋友可以参考下
因公司后台管理系统很多功能技术老旧,最近在用vue重构公司的后台管理系统,在做商品管理添加商品这一块,借鉴淘宝的添加商品的交互,需要实现一个简单的吸顶、锚点和...粘性定位元素相当于position:relative和positi
带竖向滚动条的图组展示效果 .box-163css{position:relative;height:330px;border:solid 1px #ddd;width:600px;margin:20px auto;} .picul{ width:100%; float:left;} .picul li{ width:115px; height:115px; float:...
IE6的兼容性问题主要出现在position:fixed上面,如何解决已经在《【CSS】IE6中的position:fixed问题与随滚动条滚动的效果》(点击打开链接)介绍过了。 下面具体说说如何利用JavaScript中的滚动事件[removed]实现...
vue自定义浏览器滚动条(已兼容ie)
由于视图本身是固定的,它不会随浏览器窗口的滚动条滚动而变化,除非你在屏幕中移动浏览器窗口的屏幕位置,或改变浏览器窗口的显示大小,因此固定定位的元素会始终位于浏览器窗口内视图的某个位置,不会受文档流动...
ie8-select滚动条
position:fixed;实现底层页面不跟随浮层模块滚动
主要介绍了详解iOS中position:fixed吸底时的滑动出现抖动的解决方案,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
认为他们的样式和效果都是比较人性化的,不过很多时候还是不得不考虑其他版本浏览器的感受,这里IE6就不用考虑他了,这货简直就是IT史上的奇葩,这里要说一个IE7的绝对定位和相对定位后,出现元素遮挡的问题。...
当前页面刷新的时候,滚动条会定位到刷新前的位置
OverlayScrollbars是一款兼容ie8的jquery滚动条美化插件。该jquery滚动条美化插件提供了一种简单的方式来对页面或某个元素的滚动条进行美化,提供了12种主题效果。
解决了 滚动条中元素是DIV 导致的问题
,Bg:"#ccc"//设置滚动条背景图片position,颜色等 ,Bar:{ Pos:"bottom"//设置滚动条初始化位置在底部 ,Bd:{Out:"#000",Hover:"red"}//设置滚动滚轴边框颜色:鼠标离开(默认),经过 ,Bg:{Out:"green",Hover:"#fff",...
element table固定头部ie的滚动条样式自定义,element table固定头部ie的滚动条样式自定义,element table固定头部ie的滚动条样式自定义,element table固定头部ie的滚动条样式自定义,element table固定头部ie的...
最近才发现IE6、IE7存在这样一个BUG:在滚动区域(DIV中)内,如果里面的标签使用了position(absolute/relative),则会飘出这个滚动区域,且不会随滚动条而滚动(静止不动)。如下所示(只在IE6和IE7中才会出现此...