ie9 scrollbar中hover 高度增高的bug

[摘]

当我们制作表格的时候，有时候会遇到数据过长，列数过多，需要横向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>