项目中前端用easyui的datagrid实现表格展示,因表格数据较多,在表格外套一层div,设置div的overflow:scroll,具体代码如下:
<div class="table" style="100%;overflow:scroll;"> <table cellspacing="0" id="datagridTable" style="1800px;"></table> </div>
该表格在谷歌,火狐浏览器下滚动条正常显示使用,在ie浏览器下滚动条显示,但滚动无效果。
页面布局错乱产生原因:
当父元素的内部元素(直接子元素或者下级子元素)的样式拥有position:relative属性时,父元素的overflow:hidden属性会失效,出现子元素会超出父元素设定的高度的情况。
解决办法:
解决这个bug很简单,在外层div上面加上position:relative就解决了。