ie9 overflow中hover scrollbar高度增高的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 

ie9中bug

静看是好的,可是,当我们鼠标移动到 table里面的时候,悲剧出现了。
在 ie9 中 ,我们可以看到每当我们在table内部促发hover伪类的时候, 黑色的块级元素 就会往下掉,直到掉到浏览器窗口的底部又跳回原来的位置,周而复始…

bug 触发条件:

经测试发现,这个bug的出现 有2个条件:

  1. 父级设置 overflow:auto(准确来说 应该是 overflow-x:auto),并且里面的元素宽度超出父级导致横向滚动条出现
  2. 父级元素的任意子元素设有: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 来的,八格!



还有几种bug,具体参考:http://www.36ria.com/4744

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值