问题
- 问题场景出现在angular overlayer悬浮层,当悬浮层底部的dom结构处于正常的文档流中时,并存在滚动条,这个时候悬浮层内会出现一个奇异的bug现象:
- 当悬浮层父级处于文档流,但内容由于布局,脱离了文档;
- 悬浮层内容由于脱离了根文档,所以会产生属于自己的滚动条;
- 当根文档出现了滚动条,悬浮层也出现了文档流,这个时候现象就出现了
- 悬浮层出现后,只要鼠标移动出悬浮层的内容范围,就会快速的闪现一下
解决办法
这里提供两种
1,把悬浮层最底层的滚动设置为scroll;
因为当鼠标移出悬浮层的可是内容区域后,ie浏览器监听到了鼠标移入了底部的文档,那么会对文档进行一次重新渲染,这个时候正常文档流内的部分就会移入视野;那我们只需要把鼠标移出这个动作不要冒泡到根文档即可;所以scroll设置为scroll,就可以让鼠标移动固定在悬浮层内;
2,清除浮动
把悬浮层外容器会处于文档结构之中,那么对悬浮层内清除浮动,并通过scroll隔断鼠标事件那这样就可以把悬浮层对文档的影响隔断;
这里用伪元素展示一下;
:after {
content:' ';
display:block;
overflow:scroll;
clear:both;
}
总结
IE浏览器是一个很神奇的东西,有很多需要探索的地方;
包括css3如何在ie浏览器中做出兼容性效果,都需要一点点去研究;