IE 下自动滚动条挡住 div内容

最新推荐文章于 2021-06-10 00:27:09 发布

tmuffamd

最新推荐文章于 2021-06-10 00:27:09 发布

阅读量229

点赞数

文章标签： IE CSS JavaScript J# HTML ViewUI

本文链接：https://blog.csdn.net/tmuffamd/article/details/83946983

版权

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>IE下横向内容超出宽度，自动滚动条也不会挡住表格内容</title>
<style type="text/css">
.tablebox{width:500px; overflow:hidden;  margin-left:0px; margin-top:0px; position:relative; z-index:0;}
.dy{border:1px solid #999999; min-width:500px;  border-bottom:none; margin-top:11px;}
.dy td{text-overflow:ellipsis; word-break:keep-all; white-space:nowrap; }
 
.dy_top{height:32px; background:#E3E3E3; border-right:1px solid #ffffff; width:136px; text-align:center; line-height:32px; font-weight:bold;}
.dy_td{border-bottom:1px solid #a1a1a1; height:31px; text-align:center; line-height:31px;}

</style> 
<script type="text/javascript" src="http://localhost:9086/inc/script/jquery1.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	var addHeight = 0;
	if($("#j_tablebox").get(0).scrollWidth > $("#j_tablebox").get(0).offsetWidth)
		addHeight = 18;
	$("#j_tablebox").css("height",($("#j_tablebox").get(0).scrollHeight+addHeight)+"px");
	$("#j_tablebox").css("overflowY","hidden");
	$("#j_tablebox").css("overflowX","auto");
});
</script>
</head>

<body>  
<div class="tablebox" id="j_tablebox">
<table border="0" class="dy" cellspacing="0" cellpadding="0">
<!-- 表头 -->
	<tr>
		<td class="dy_top">L1</td>
		<td class="dy_top">L2</td>
		<td class="dy_top">L3</td>
		<td class="dy_top">L4</td>
	</tr>
	<tr>
		<td class="dy_td">fdsafdsafdsa</td>
		<td class="dy_td">fdsafdsaffdsafdsafdsafdsafdsafdsafdsafdsafdsa</td>
		<td class="dy_td">fdsafdfdsafdsafdsadsa</td>
		<td class="dy_td">fdsafdsa</td> 
	</tr>
</table>
</div> 
</body>
</html>

在正常情况下，overflow:auto; 在IE５，IE６，IE７以下，是被挡住表格内容的；IE８以上正常；

tmuffamd

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
IE 下自动滚动条挡住 div内容

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"&gt;&lt;html&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html;
复制链接

扫一扫