六狼论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

新浪微博账号登陆

只需一步,快速开始

搜索
查看: 122|回复: 0

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

[复制链接]

升级  20.67%

19

主题

19

主题

19

主题

秀才

Rank: 2

积分
81
 楼主| 发表于 2013-2-7 20:45:48 | 显示全部楼层 |阅读模式
<!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; 在IE5,IE6,IE7以下,是被挡住表格内容的;IE8以上正常;
 
 
您需要登录后才可以回帖 登录 | 立即注册 新浪微博账号登陆

本版积分规则

快速回复 返回顶部 返回列表