转自文章 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