首頁 >web前端 >html教學 >遇到一个div设置了overflow:hidden后超出屏幕部分无法显示的问题_html/css_WEB-ITnose

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

WBOY
WBOY原創
2016-06-21 09:33:171929瀏覽

<!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是必须要的,求解。


回复讨论(解决方案)

    .out {
width:100%;
        overflow:hidden;
    }

    .out {
width:100%;
        overflow:hidden;
    }
不好意思啊,你加了个width:100%,还是没有效果。如果给.out加上固定宽度,让宽度等于inner就可以解决,但是我不希望这样,因为会有很多的页面用到.out

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

加上这个试试 .inner td{float:left;}

昏,理解错了。

试试3楼的。

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

加上这个试试 .inner td{float:left;}
对此我表示不行啊。td貌似没法做浮动吧?

td是可以浮动的,但是它的浮动并不是每个浏览器都支持的。

ie6、7是不支持td的浮动的。

按你的要求:
一个方法是删除overflow:hidden;
一个方法是设置.out固定宽度,但设置能全显示的宽度overflow:hidden;也就没有多大意义了吧。
你的需求就不是合理的需求。

overflow:hidden;先理解下它

按你的要求:
一个方法是删除overflow:hidden;
一个方法是设置.out固定宽度,但设置能全显示的宽度overflow:hidden;也就没有多大意义了吧。
你的需求就不是合理的需求。
呵呵,这倒是。

overflow:hidden;先理解下它
恩。理解的,只是没想到div的默认宽度最大只有一个屏幕,超出了就必须设置宽度了。

LZ在做文字滚动效果吗?

LZ在做文字滚动效果吗?
不是啊。仅仅是一个表格撑开div的问题。

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn