项目问题备忘之IE6、IE7父元素滚动,子元素不跟随滚动bug和点击穿透bug
由于所做项目要求兼容IE7以上浏览器,所以遇到了2个IE7浏览器的问题,好在网上一搜就能找到答案,不得不感谢这些前端前辈们留下的痕迹,方便小菜学习。
问题1描述:
在IE6,IE7下,子元素使用position:relative、父元素或者祖先元素了使用overflow:auto后,我们预期的是滚动条滚动时,子元素也应该随之滚动,实际情况是这些设置了position:relative的内容不滚动,而当鼠标划过时,它又跑到了该在的地方。
办法:起初我以为是浏览器渲染的问题,后来google搜了一下,找到了答案,解决办法就是将设置了overflow:auto的元素加上相对定位(positon:relative;)即可。
问题2描述:
在IE7浏览器下,设置了蒙层的透明背景色,例如:background: rgba(244,219,187, 0.6);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99F4DBBB, endColorstr=#99F4DBBB);而被蒙层遮挡的按钮还是可以点击的。
办法:解决方案就是将蒙层的背景色切成了1px*1px像素的图片,然后将其设为蒙层的背景图片即可。
项目做完留点笔记,方便备忘和学习,希望有其他思路小伙伴交流学习。