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个条件：

1. 父级设置 overflow:auto(准确来说 应该是 overflow-x:auto),并且里面的元素宽度超出父级导致横向滚动条出现
2. 父级元素的任意子元素设有:hover伪类并且里面有属性设置(与原有的属性不一样即可)

满足这2个条件，当你触发父级里面的 :hover 伪类的时候，bug就会出现。

解决方案：

知道了触发条件，自然解决方案就能得知。

根据触发条件得到的解决方案是：

1. 给父级别设置 overflow-x:scroll,即：

   ?

   1 2 3

   /*css document*/ .scroll_auto{ width : 100% ; overflow-x: scroll ;}

2. 保证这个父级里面的元素不超出 父级的宽度。

3. 保证这个父级里面的元素没有: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