ie下带滚动条容器background属性和border属性的bug

现象
封装的angularjs hikSelect指令在个别ie11浏览器下下拉选项在滚动是会出现横线.
ie下带滚动条容器background属性和border属性的bug

分析
打开调试工具,发现去掉滚动容器的上下边框后该现象消失,因此认为是边框导致了该问题,但这个边框不能去掉,因此还要继续分析.自己写了一个带滚动条带边框的div在ie下没问题,因此不全是边框导致的该问题,后面把有问题的样式直接全部拿过来一个个排除,发现当设置background: #fff时问题出现了.

结论
经过测试当在一个带滚动条的div上同时设置background和上下边框的border属性,拖动滚动条时会出现横线.

解决方法
由于border和背景需要设置,因此决定添加一层div试试,将背景色、overflow和max-height属性移到新添加的子div容器上设置。经测试现象消失。

总结
问题虽然解决了,但还是花费了很多时间的,问题出现的根本原因还是不清楚,目前只能归结于ie浏览器的bug了,因为我自己的ie下是好的,只在测试机上的ie不行,愿以后不再兼容ie.

相关推荐