问题描述
因为使用了一个滚动条美化插件;该插件使用div容器做滚动条,所以使用了position:relative相当定位与position: absolute绝对定位与overflow:hidden影响容器内部提示框显示问题。
基础代码如下
<div style="max-height:500px;overflow: hidden;">
<div style="position: relative; overflow:hidden;">
<div style="position: relative; overflow:hidden;">
<table class="table table-ash table-striped table-hover table-fixed">
<tbody>
<tr ng-repeat="data in ngTable.data" tip-repeat-done tr-active>
<td width="4%">我们对Markdown编辑器进行了一些功能拓展与语法支持,除了标准的Markdown编辑器功能,我们增加了如下几点新功能,帮助你用它写博客:我们对Markdown编辑器进行了一些功能拓展与语法支持,除了标准的Markdown编辑器功能,我们增加了如下几点新功能,帮助你用它写博客:</td>
<td width="40%">我们对Markdown编辑器进行了一些功能拓展与语法支持,除了标准的Markdown编辑器功能,我们增加了如下几点新功能,帮助你用它写博客:</td>
<td width="10%">文字太多了;要显示滚滚动条,原生滚动条有太丑了,这怎么办???</td>
<td width="10%">使用插件来帮忙</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div style="position: absolute;">
<div style="position: absolute;">
<div>......</div>
</div>
</div>
显示效果图
解决问题方法
去掉滚动条美化插件,使用传统的滚动条,少了两层相对定位和绝对定位的DIV;详细代码如下:
<div style="max-height:500px;overflow-y:auto;">
<table class="table table-ash table-striped table-hover table-fixed">
<tbody>
<tr ng-repeat="data in ngTable.data" tip-repeat-done tr-active>
<td width="4%">我们对Markdown编辑器进行了一些功能拓展与语法支持,除了标准的Markdown编辑器功能,我们增加了如下几点新功能,帮助你用它写博客:我们对Markdown编辑器进行了一些功能拓展与语法支持,除了标准的Markdown编辑器功能,我们增加了如下几点新功能,帮助你用它写博客:</td>
<td width="40%">我们对Markdown编辑器进行了一些功能拓展与语法支持,除了标准的Markdown编辑器功能,我们增加了如下几点新功能,帮助你用它写博客:</td>
<td width="10%">文字太多了;要显示滚滚动条,原生滚动条有太丑了,这怎么办???</td>
<td width="10%">使用插件来帮忙</td>
</tr>
</tbody>
</table>
</div>
显示效果图如下;
技术难点是:
1、动态数据、动态初始绘制容器,调试费劲;
2、容器相对定位与绝对定位;需要考虑其他模块的兼容性问题。
特此记录一下,方便遇到再次查阅;如果在遇到这种情况,首先考虑div定位问题。其次是overflow:hidden