遇到一个div设置了overflow:hidden后超出屏幕部分无法显示的问题

qinglinglaoren 2012-04-11 09:02:23
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.out {
overflow:hidden;
}
.inner {
width:100%;
}
</style>
</head>

<body>
<div class="out">
<table class="inner">
<tr>
<td>sadfsadfsadfsassssssssssssssssssssssssssssssssssssssssssssssssssssd</td>
<td>sadfsadfsadfsassssssssssssssssssssssssssssssssssssssssssssssssssssd</td>
<td>sadfsadfsadfsassssssssssssssssssssssssssssssssssssssssssssssssssssd</td>
<td>sadfsadfsadfsassssssssssssssssssssssssssssssssssssssssssssssssssssd</td>
<td>sadfsadfsadfsassssssssssssssssssssssssssssssssssssssssssssssssssssd</td>
<td>sadfsadfsadfsassssssssssssssssssssssssssssssssssssssssssssssssssssd</td>
<td>sadfsadfsadfsassssssssssssssssssssssssssssssssssssssssssssssssssssd</td>
<td>sadfsadfsadfsassssssssssssssssssssssssssssssssssssssssssssssssssssd</td>
<td>sadfsadfsadfsassssssssssssssssssssssssssssssssssssssssssssssssssssd</td>
<td>sadfsadfsadfsassssssssssssssssssssssssssssssssssssssssssssssssssssd</td>
<td>sadfsadfsadfsassssssssssssssssssssssssssssssssssssssssssssssssssssd</td>
<td>sadfsadfsadfsassssssssssssssssssssssssssssssssssssssssssssssssssssd</td>
<td>sadfsadfsadfsassssssssssssssssssssssssssssssssssssssssssssssssssssd</td>
<td>sadfsadfsadfsassssssssssssssssssssssssssssssssssssssssssssssssssssd</td>
<td>sadfsadfsadfsassssssssssssssssssssssssssssssssssssssssssssssssssssd</td>
<td>sadfsadfsadfsassssssssssssssssssssssssssssssssssssssssssssssssssssd</td>
<td>sadfsadfsadfsassssssssssssssssssssssssssssssssssssssssssssssssssssd</td>
<td>sadfsadfsadfsassssssssssssssssssssssssssssssssssssssssssssssssssssd</td>
<td>sadfsadfsadfsassssssssssssssssssssssssssssssssssssssssssssssssssssd</td>
</tr>
</table>
</div>
</body>
</html>


这是一个简单的demo
请问。为什么给div设置了 overflow:hidden之后,超出屏幕的部分就无法显示。
此问题出现于除ie6外的浏览器中。

我的overflow:hidden是必须要的,求解。
...全文
2595 13 打赏 收藏 转发到动态 举报
写回复
用AI写文章
13 条回复
切换为时间正序
请发表友善的回复…
发表回复
qinglinglaoren 2012-04-11
  • 打赏
  • 举报
回复
[Quote=引用 12 楼 的回复:]
LZ在做文字滚动效果吗?
[/Quote]
不是啊。仅仅是一个表格撑开div的问题。
ningyb 2012-04-11
  • 打赏
  • 举报
回复
LZ在做文字滚动效果吗?
qinglinglaoren 2012-04-11
  • 打赏
  • 举报
回复
[Quote=引用 9 楼 的回复:]

overflow:hidden;先理解下它
[/Quote]
恩。理解的,只是没想到div的默认宽度最大只有一个屏幕,超出了就必须设置宽度了。
qinglinglaoren 2012-04-11
  • 打赏
  • 举报
回复
[Quote=引用 8 楼 的回复:]

按你的要求:
一个方法是删除overflow:hidden;
一个方法是设置.out固定宽度,但设置能全显示的宽度overflow:hidden;也就没有多大意义了吧。
你的需求就不是合理的需求。
[/Quote]
呵呵,这倒是。
三石-gary 2012-04-11
  • 打赏
  • 举报
回复
overflow:hidden;先理解下它
Acesidonu 2012-04-11
  • 打赏
  • 举报
回复
按你的要求:
一个方法是删除overflow:hidden;
一个方法是设置.out固定宽度,但设置能全显示的宽度overflow:hidden;也就没有多大意义了吧。
你的需求就不是合理的需求。
qinglinglaoren 2012-04-11
  • 打赏
  • 举报
回复
ie6、7是不支持td的浮动的。
qinglinglaoren 2012-04-11
  • 打赏
  • 举报
回复
td是可以浮动的,但是它的浮动并不是每个浏览器都支持的。
qinglinglaoren 2012-04-11
  • 打赏
  • 举报
回复
[Quote=引用 3 楼 的回复:]

本来就是这样的啊
你把div设置成overflow:hidden。内层的溢出元素,肯定不会显示了

加上这个试试 .inner td{float:left;}
[/Quote]
对此我表示不行啊。td貌似没法做浮动吧?
001007009 2012-04-11
  • 打赏
  • 举报
回复
昏,理解错了。

试试3楼的。
挨踢直男 2012-04-11
  • 打赏
  • 举报
回复
本来就是这样的啊
你把div设置成overflow:hidden。内层的溢出元素,肯定不会显示了

加上这个试试 .inner td{float:left;}
qinglinglaoren 2012-04-11
  • 打赏
  • 举报
回复
[Quote=引用 1 楼 的回复:]

.out {
width:100%;
overflow:hidden;
}
[/Quote]
不好意思啊,你加了个width:100%,还是没有效果。如果给.out加上固定宽度,让宽度等于inner就可以解决,但是我不希望这样,因为会有很多的页面用到.out
001007009 2012-04-11
  • 打赏
  • 举报
回复
.out {
width:100%;
overflow:hidden;
}

61,110

社区成员

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧