overflow：hidden在各个浏览器中的应用-CSDN博客

首先看看w3c的解释：

这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。理解这句话的深刻含义，可以看出有一个包含，包裹的意思。

它的值可能为

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

ie不支持 inherit特性，包括ie8。

1）ie6对overflow的支持情况，ie6对这个属性有误解。不支持 overflow=“auto”，要使它有滚动条，必须设置width或者height。下面的例子说明

代码如下：

<! DOCTYPE HTML >
< html >
< head >
     < meta http-equiv ="Content-Type" content ="text/html;charset=gb2312" />
     < style type ="text/css" >
            * { margin : 0 ; padding : 0 }
        #doc { width : 990px ; margin : 0 auto ; margin-top : 50px ; font : 12px/1.5 arial ; height : }
        #doc h4 { border-bottom : 1px solid #000 ; font-size : 30px ; }
    #parent { overflow : auto ; border : 1px solid #dfdfdf ; }
    #child { height : 30px ; border : 1px solid red ; }
    #child a { display : block ; }
     </ style >
     < title > ocer </ title >
</ head >
< body >
< div id ="doc" >
     < h4 > overflow的研究 </ h4 >
< div id ="parent" >
< div id ="child" >
< a href ="http://www.baidu.com/?isnew" > 百度空间-最大的在线交友平台 </ a >
< a href ="http://www.baidu.com/?isnew" > 百度空间-最大的在线交友平台 </ a >
< a href ="http://www.baidu.com/?isnew" > 百度空间-最大的在线交友平台 </ a >
< a href ="http://www.baidu.com/?isnew" > 百度空间-最大的在线交友平台 </ a >
< a href ="http://www.baidu.com/?isnew" > 百度空间-最大的在线交友平台 </ a >
< a href ="http://www.baidu.com/?isnew" > 百度空间-最大的在线交友平台 </ a >
< a href ="http://www.baidu.com/?isnew" > 百度空间-最大的在线交友平台 </ a >
< a href ="http://www.baidu.com/?isnew" > 百度空间-最大的在线交友平台 </ a >
</ div >
</ div >
</ div >
</ body >

</html>

ie6还有一个bug。当父元素的直接子元素或者下级子元素的样式拥有position:relative属性时，父元素的overflow:hidden属性就会失效。解决方法就是给父元素添加上position：relative属性。可以将上面的代码修改下，

#parent{overflow:hidden;border:1px solid #dfdfdf;height:50px;}

#child{border:1px solid red;}

#child a{display:block;position:relative}

子元素都超过了父元素框。解决办法是在其中添加position：relative。

ie7，ie8，ie9，chrome，firefox均显示正常。

在上文中我提到了overflow的包含的特性，其实在CSS中还有很多其他的元素有这个特性。这里我发散下，也是对这个特性来总结下，做一个概述。

有这个特性的还有，浮动，绝对定位，inline-block。下面我结合例子逐一的来分析下为什么。

关于浮动

看一个例子：先看代码：

1 <! DOCTYPE HTML >
2 < html >
3 < head >
4      < meta http-equiv ="Content-Type" content ="text/html;charset=gb2312" />
5      < style type ="text/css" >
6         * { margin : 0 ; padding : 0 }
7         #doc { width : 990px ; margin : 0 auto ; margin-top : 50px ; font : 12px/1.5 arial ; height : }
8         #doc h4 { border-bottom : 1px solid #000 ; font-size : 30px ; margin-bottom : 20px ; }
9         .test { border : 2px solid blue ; background : #dfdfdf ; }
10      </ style >
11      < title > 理解包含 </ title >
12 </ head >
13 < body >
14      < div id ="doc" >
15      < h4 > 理解包含 </ h4 >
16      < div class ="test" >
17      < img src ="dj.jpg" />
18      </ div >
19      </ div >
20 </ body >

21 </html>

div默认的宽度是100%，在没有浮动的时候，结果如左边的图形所示，在.test里面添加了浮动float：left特性后，结果如右图所示。这说明的确有包含的特性。