ie9 scrollbar中hover 高度增高的bug
来源:互联网 发布:linux mv 创建文件夹 编辑:程序博客网 时间:2024/05/19 23:25
当我们制作表格的时候,有时候会遇到数据过长,列数过多,需要横向or纵向的滚动条的需求,我们一般的做法是 给这个表格的外层加一个scroll_auto 的 div 并设置:
/*css document*/.scroll_auto{ width:100%; overflow:auto;}
套在table的外层
<!-- html element --><div class="scroll_auto"><table><tr><td>.........</td></tr> <tr><td>........</td></tr></table></div>
如果碰巧 你给这个 table 或者table里面的元素 设置了 :hover 的伪类(最常见的是鼠标移到table中对应的行数,该行高亮) 并在里面写有属性,那恭喜 专属于 ie9 的 bug出现了(经测试,直到ie10预览版第二版,这个bug都还没修复)。
bug 重现地址:ie9 bug
静看是好的,可是,当我们鼠标移动到 table里面的时候,悲剧出现了。
在 ie9 中 ,我们可以看到每当我们在table内部促发hover伪类的时候, 黑色的块级元素 就会往下掉,直到掉到浏览器窗口的底部又跳回原来的位置,周而复始…
bug 触发条件:
经测试发现,这个bug的出现 有2个条件:
- 父级设置 overflow:auto(准确来说 应该是 overflow-x:auto),并且里面的元素宽度超出父级导致横向滚动条出现
- 父级元素的任意子元素设有:hover伪类并且里面有属性设置(与原有的属性不一样即可)
满足这2个条件,当你触发父级里面的 :hover 伪类的时候,bug就会出现。
解决方案:
知道了触发条件,自然解决方案就能得知。
根据触发条件得到的解决方案是:
1.给父级别设置 overflow-x:scroll,即:
/*css document*/.scroll_auto{ width:100%; overflow-x:scroll;(or overflow-y:scroll )}
2.保证这个父级里面的元素不超出 父级的宽度。
3.保证这个父级里面的元素没有:hover 伪类(这个貌似不怎么可能)。
对症下药
1.首先,给 .scroll_auto 外层包一个 空 tag(行内元素 or 块级元素均可){如外面套一个空的dv}
<!-- html document --><div><div class="scroll_auto"><table class="gen_tb" width="110%"><tr><td>文字</td></tr><tr><td>文字</td></tr></table></div></div>
2.给 这个元凶 .scroll_auto 设置一个:hover伪类
/*css document*/.scroll_auto:hover{ height:100%;}
刷新页面, bug修复。这种方法主要是针对 height 来的,八格!
0 0
- ie9 overflow中hover scrollbar高度增高的bug
- ie9 scrollbar中hover 高度增高的bug
- IE6 中 a:hover 的bug
- css中hover伪类的bug
- ie9渲染的bug
- IE6 中 a:hover 的bug (转)
- jQuery中hover连续触发动画的bug
- 关于jQuery中hover事件的一个小bug
- textarea高度自动增高
- IE6-IE9中tbody的innerHTML不能赋值bug
- DIV高度随里边内容的增多而增高
- jquery hover IE9
- ie6中[:hover] bug 解决方案一
- Jquery UI 在IE9中bug
- IE中中CSS伪类:hover的使用及其BUG
- IE中伪类:hover的使用及BUG
- IE中伪类:hover的使用及BUG
- IE中伪类:hover的使用及BUG
- Apache Portable Runtime (APR) based Native library for Tomcat
- Python中为什么没有++和--(自增/减)
- 关于html 界面中元素隐藏的几种方法
- 判断js是否被禁用
- C++中friend的使用(friend function and friend class)
- ie9 scrollbar中hover 高度增高的bug
- 南邮 OJ 1095 奇特的图形
- Same Tree
- C++实现两个字符串之间的Levenshtein Distance(编辑距离)
- 0-1排序引理
- Struts2组合spring
- 常用做action recognition 的数据集介绍
- linux 下编译安装Qt
- 埃博拉病毒的实验室症断