ie9 scrollbar bug(IE9父容器overflow:auto时,子容器状态更改导致滚动条下出现额外空间)
转自文章 http://www.jackness.org/2011/10/18/ie9-scrollbar-bug/
当我们制作表单的时候,有时候会遇到数据过长,表单列数过多,需要横向滚动条的需求,我们一般的做法是 给这个表格的外层加一个 scroll_auto 的 div 并设置:
1
2
|
/*css document*/
.scroll_auto{ width : 100% ; overflow : auto ;}
|
套在table的外层
1
2
3
4
5
6
7
8
|
<!-- html element -->
< div class = "scroll_auto" >
< table >
< tr >
< td ></ td >
</ tr >
</ table >
</ div >
|
如果碰巧 你给这个 table 或者table里面的元素 设置了 :hover 的伪类(最常见的是鼠标移到table中对应的行数,该行高亮) 并在里面写有属性,那恭喜 专属于 ie9 的 bug出现了(经测试,直到ie10预览版第二版,这个bug都还没修复)。
bug 重现地址:http://www.jackness.org/lab/ie9-scrollbar-bug/ie9-scrollbar-bug.html
静看是好的,可是,当我们鼠标移动到 table里面的时候,悲剧出现了。
在 ie9 中 ,我们可以看到每当我们在table内部促发hover伪类的时候, 黑色的块级元素 就会往下掉,直到掉到浏览器窗口的底部又跳回原来的位置,周而复始…
bug 触发条件:
经测试发现,这个bug的出现 有2个条件:
- 父级设置 overflow:auto(准确来说 应该是 overflow-x:auto),并且里面的元素宽度超出父级导致横向滚动条出现
- 父级元素的任意子元素设有:hover伪类并且里面有属性设置(与原有的属性不一样即可)
满足这2个条件,当你触发父级里面的 :hover 伪类的时候,bug就会出现。
解决方案:
知道了触发条件,自然解决方案就能得知。
根据触发条件得到的解决方案是:
给父级别设置 overflow-x:scroll,即:
?123/*css document*/
.scroll_auto{
width
:
100%
; overflow-x:
scroll
;}
保证这个父级里面的元素不超出 父级的宽度。
保证这个父级里面的元素没有:hover 伪类(这个貌似不怎么可能)。
本文章推荐的是以下的解决方案:
我们使用 ie自带的 debug工具可以发现,触发这个bug的元凶是 .scroll_auto,影响就是 他自身莫名其妙地不断增高了…
找到了元凶,自然就可以对症下药了,方法是:
1.首先,给 .scroll_auto 外层包一个 空 tag(行内元素 or 块级元素均可)
1
2
3
4
5
6
7
8
9
10
11
12
|
<!-- html document -->
< div >
< div class = "scroll_auto" >
< table class = "gen_tb" width = "110%" >
< tr >< td >文字</ td ></ tr >
< tr >< td >文字</ td ></ tr >
< tr >< td >文字</ td ></ tr >
< tr >< td >文字</ td ></ tr >
< tr >< td >文字</ td ></ tr >
</ table >
</ div >
</ div >
|
2.给 这个元凶 .scroll_auto 设置一个:hover伪类
1
2
|
/*css document*/
.scroll_auto:hover{ height : 100% ;}
|
然后刷新页面,恭喜 bug修复。
这种方法就是针对 height来对症下药的,嘛,毫无悬念,一针见效,哟西。
演示地址:http://www.jackness.org/lab/ie9-scrollbar-bug/ie9-scrollbar-debug.html
ie9 scrollbar bug(IE9父容器overflow:auto时,子容器状态更改导致滚动条下出现额外空间)相关推荐
- 设置子父元素overflow:hidden,子元素absolute不显示问题
需求描述 vue项目用的vue-awesome-swiper插件 实现下图结果: 为什么 溢出来的元素自然就隐藏了 解决 首先我想到了给swiper容器overflow-x:hidden然后overf ...
- 使用displsy:flex + overflow:hidden时子元素被压缩
博客地址 以下结构就很可能会发生子元素被压缩: ul {display: flex;overflow: hidden;li {display: flex;}} 效果: 此时我的目的是做一个轮播图,想让 ...
- css居父容器下,整理:子容器垂直居中于父容器的方案
本文在evernote里有备份.如果evernote的阅读区域嫌窄了,那么可以把这个链接拖入书签并点击javascript:jQuery("#container").width(9 ...
- 解决IE6,IE7下子元素使用position:relative、父元素使用overflow:auto后,子元素不随着滚动条滚动的问题...
解决IE6,IE7下子元素使用position:relative.父元素使用overflow:auto后,子元素不随着滚动条滚动的问题 在IE6,IE7下,子元素使用position:relative ...
- flex与grid响应式布局中的子容器为固定空间后的剩余空间,该元素容器不出现滚动条或者滚动条异常问题
flex与grid响应式布局中的子容器滚动条问题 最近在用grid布局写一些简单的响应式页面页面,遇到一个问题,就是我们的全局用grid布局或者flex布局中,遇到某个子元素的宽度或者高度是页面剩下的 ...
- 父元素设置overflow: overlay; 或 overflow: scroll; 或 overflow: auto; 如果子元素超出父元素内容,父元素会被子元素超出部分撑大至子元素同样大小
发现 父元素设置overflow: overlay; 或 overflow: scroll; 或 overflow: auto; 如果子元素超出父元素内容,父元素会被子元素超出部分撑大至子元素同样大小 ...
- iOS 移动端overflow:auto 滚动不平滑及bug处理
在苹果手机上使用overflow:auto 默认滚动不平滑. 解决方案是使用-webkit-overflow-scrolling:touch bug: 会导致使用固定定位的元素,随着页面一起滚动. f ...
- IE6 CSS bug: position:relative元素被overflow:auto/scroll元素包含
BUG描述: 页面中某DIV使用了position:relative,结合top=-25px等元素定位.在FF和IE7下表现正常,但是在IE6中该DIV会随鼠标滚动而滚动. 分析: 这是IE6一个已知 ...
- [译] 关于CSS中的float和position (父容器div内的子元素div为float时,父元素无法撑开(或高度自适应)的解决方式)
测试案例:http://blog.csdn.net/goodshot/article/details/44408245 当构建页面排版时,有不同的方法可以使用.使用哪一种方法取决于具体页面的排版要求, ...
最新文章
- GTA 5 + AI = ?
- 引进博士:118万安家房补+18万经费;硕士:42万安家房补+10万经费
- java des zero_android----Java DES加密算法工具类
- java开发支持类库
- java out.flush_java中基本输入输出流的解释(flush方法的使用)
- word2003文档题注
- (ZZ)A*算法入门
- Spring: 事务传播机制
- Python collections模块总结
- tcp/ip网络协议学习
- python实现求解列表中元素的排列和组合问题
- feedback vertex set problem (FVS) 反馈顶点集问题 是什么
- 动软代码生成器连接8.0.17版本的mysql
- Ipone桌面计算机没了,苹果笔记本桌面图标不见了怎么办
- Round 1—数据结构基本概念
- 电源学习总结(三)——线性稳压的参数
- 【三大锁】悲观锁——mysql悲观锁
- 【notes|奇点临近】chapter1
- FPGA开发技巧备忘录——目录
- 在RHEL4的GNOME环境下编译安装eva0.4.1
热门文章
- uboot成功移植到STM32F103ZET6(二)
- PostScript基本语法
- 计算机毕业设计ssm哈尔滨市合欢婚庆公司管理588fz系统+程序+源码+lw+远程部署
- LeetCode 2477. 到达首都的最少油耗
- 汽车最少油耗穿越沙漠问题(Java源码)
- VR技术揭秘:从头到尾解析VR的实现原理
- 算法面试题:给40亿个不重复的unsigned int的整数,没排过序的,然后再给一个数,如何快速判断这个数是否在那40亿个数当中?
- iPhone XS 上的 Siri 没反应怎么办?苹果手机无法使用嘿 Siri 解决方法
- Java基础入门 JFrame
- 转吴小龙的 mvp Android MVP 实例