IE 9渲染overflow-x的bug及解决

　　在最近的项目中，解决了一些浏览器兼容方面的bug，这篇主要描述在IE 9在渲染值为auto的overflow-x属性时，所产生的专属bug及解决办法。

 

1、问题描述

 

　　在做一个收货地址管理静态页面的时候，需要在众多地址中标示当前鼠标移动了那一个地址上面，所以我给地址的行加上了:hover伪类，然后，我在IE 9下发现了一个有趣的现象(见附件first.html)。

　　为什么我设置的max-height属性没有能够起作用？这种情况是怎么产生的，又该怎么解决呢？

2、问题分析

  该问题是一个IE 9独有的bug，地址为http://www.jackness.org/?p=615#more-615的文章中对该bug出现的前置条件作了如下陈述：

bug 触发条件：
经测试发现，这个bug的出现有2个条件：
1）父级设置overflow:auto(准确来说应该是overflow-x:auto),并且里面的元素宽度超出父级导致横向滚动条出现；
2） 父级元素的任意子元素设有:hover伪类并且里面有属性设置(与原有的属性不一样即可)；
满足这2个条件，当你触发父级里面的:hover 伪类的时候，bug就会出现。

 

　　对比我的页面样式和文档结构，发现完全符合这两个条件。

 

.address .address-list .ls{
	max-height:130px;
	margin-top: 10px;
	border: 1px solid rgb(226,226,226);
	overflow: auto;
	background-color: rgb(255, 255, 255);
}
.address .ls .address-element{
	margin-top: 6px;
	float: left; 
	white-space: nowrap;
}
.address .ls .address-element:hover{
	background-color:yellow;
}

 

<div class="ls" id="addressList">
<div class="address-element">
代昊鑫上海市上海市徐汇区北四环中关四桥太平洋大厦503 100000 13598660548
</div>
	…………
</div>

 

 

　　那么这两个条件是否完全归纳了呢？有没有其他的可能情况呢？为此我在此文件的基础之上，进行了如下测试：

 

　　1）  测试目的：overflow-x的值不为auto时，该bug是否会出现；

　　　　条件：保持其他条件不变，重新设置overflow-x的值为hidden/scroll；

　　　　结果：所有浏览器上正常，IE9 没有出现上述问题

　　　　示例(见附件)：测试1-hidden.html    测试2-scroll.html

 

　　2）  测试目的：父元素不产生横向滚动条时，该bug是否会出现；

　　　　条件：保持其他条件不变，修改数据内容，使父元素不产生横向滚动条；

　　　　结果：所有浏览器上正常，IE 9 没有出现上述问题

　　　　示例(见附件)：测试3-删除文字.html。

 

　　3）  测试目的：通过父元素触发JS事件动态修改子元素样式，，该bug是否会出现；

　　　　条件：保持其他条件不变，删除:hover伪类，通过id为addressList的父元素的　　hover/mouseover事件修改子元素　　　　　　　的样式；

　　　　结果：所有浏览器上正常，IE 9 没有出现上述问题

　　　　示例(见附件)：测试4-父元素的hover事件改变子元素的样式.html

     　　　　　　　　　　测试5-父元素的mouseover事件改变子元素的样式.html。

 

　　4） 测试目的：通过子元素触发JS事件动态修改自身样式，，该bug是否会出现；

　　　　条件：保持其他条件不变，删除:hover伪类，通过子元素的hover/mouseover事件修改自身的样式；

　　　　结果：所有浏览器上正常，IE 9 没有出现上述问题

　　　　示例(见附件)：测试10-子元素的mouseover事件改变自身的样式.html

          　　　　　　　　测试11-子元素的hover事件改变自身的样式.html。

 

　　5） 测试目的：通过父元素触发JS事件动态修改子元素的class值，，该bug是否会出现；

　　　　条件：保持其他条件不变，删除:hover伪类，通过id为addressList的父元素的hover/mouseover事件修改子元素的　　　　　　　class值；

　　　　结果：其它浏览器上正常，IE 9复现上述问题

　　　　示例(见附件)：测试6-父元素的hover事件增加子元素的class.html

　　　　　    　　　　　测试6-2-父元素的hover事件删除子元素的class.html

   　　　　　　　　　　测试7-父元素的mouseover事件增加子元素的class.html

   　　　　　　　　　　测试7-2-父元素的mouseover事件删除子元素的class.html。

 

　　6）测试目的：通过子元素触发JS事件动态修改自身得class值，该bug是否会出现；

      　　条件：保持其他条件不变，删除:hover伪类，通过子元素的hover/mouseover事件修改自身的class值；

     　　结果：其它浏览器上正常，IE 9复现上述问题 

    　　示例(见附件)：测试12-子元素的hover事件为自己增加class.html

　　　　　　　　　测试13-子元素的mouseover事件为自己增加class.html

　　　　　　　　　测试14-子元素的hover事件删除自身的class.html

　　　　　　　　　测试15-子元素的mouseover事件删除自身的class.html。

 

　　7） 测试目的：通过外部元素的JS事件来动态改变子元素样式，该bug是否会出现；

　　　　条件：保持其他条件不变，删除:hover伪类，创建一个button按钮,通过该按钮的click事件，修改id为addressList的元　　　　　　　素的子元素样式；

　　　　结果：所有浏览器上正常，IE 9 没有出现上述问题

　　　　示例(见附件)：测试8-click事件改变子元素的样式.html。

 

　　8）测试目的：通过外部元素的JS事件来动态改变子元素class值，该bug是否会出现；

　　　　条件：保持其他条件不变，删除:hover伪类，创建一个button按钮,通过该按钮的click事件，修改id为 addressList的元　　　　　　　素的子元素的class值；

　　　　结果：其它浏览器上正常，IE 9复现上述问题

　　　　示例(见附件)：测试9-click事件增加子元素的class.html

　　　　　　　　　　测试9-2-click事件删除子元素的class.html。

 

　　通过上述测试可以看出，修改子元素style值是无法触发IE 9这个bug的，只有修改(无论是通过父元素、自身还是外部操作)子元素的class属性的值才能触发该bug

　　由此得出该bug出现的两个前置条件为：

 

       1）父级设置overflow:auto(准确来说应该是overflow-x:auto),并且里面的元素宽度超出父级导致横向滚动条出现，并且父级元素不设置height属性的值。

 

       2）子元素设有:hover伪类或者通过动态修改(增加或者删除)子元素的class属性值；

 

       满足这2个条件，并且触发子元素的:hover伪类或者执行了修改子元素class属性值得代码时，bug就会出现。

 

3、解决方案

　通过以上分析我们知道了触发条件，根据触发条件得到如下解决方案：

　　1)   给父级别的overflow-x设置非auto值；

　　2)   保证这个父级里面的元素内容不超出父级的宽度；

　　3)   保证子元素没有:hover伪类或者保证不动态修改子元素的class属性值；

　　但是以上解决方案都可能对我们的功能造成影响，既然造成的结果都是父元素的高度被改变，那么我们就可以设置父元素的height属性来解决问题。

　　1） 通过对父元素的height属性直接设置高度值【见附件：解决方案1.html】；

 

.address .address-list .ls{
	max-height:130px;
	height:130px;
	margin-top: 10px;
	border: 1px solid rgb(226,226,226);
	overflow: auto;
	background-color: rgb(255, 255, 255);
}

 

 

　　2） 在父元素外层设置添加一个空的元素，设置父元素height占外层元素高度的100%，【见附件：解决方案2.html】；

 

.address .address-list .ls{
	max-height:130px;
	height:100%;
	margin-top: 10px;
	border: 1px solid rgb(226,226,226);
	overflow: auto;
	background-color: rgb(255, 255, 255);
}

 

4、总结

　　在进行web开发中会遇到很多关于浏览器兼容的问题，通过一些测试来了解问题产生的原因和前置条件，在后续的开发中可以避免出现重复的错误。

　　在工作中多注意总结和积累解决问题办法，才能不断的提高自己。