IE6下overflow:hidden无效问题终极解决之道

程序猿 CSS ... (shuke.2013-06-17 08:15)

项目中发现在ie6和ie7里面overflow:hidden无效,还是会超出外层div，试了很多方法，最后却只在外层div上面加上position:relative有效，
记录下，有空再试试。

<div   style=" height:175px; overflow:hidden;position:relative">
overflow;有效果了！
</div>

2 楼 shuke[2013-06-17 08:19]

IE6下 Bug overflow:hidden无效解决办法如下：

产生原因：当父元素的直接子元素或者下级子元素的样式拥有position:relative属性时，父元素的overflow:hidden属性就会失效。
解决办法：我们在IE 6内发现子元素会超出父元素设定的高度，即使父元素设置了overflow:hidden。
解决这个bug很简单，在父元素中使用position:relative;即可解决该bug

写代码久了就会发现，好多兼容性的问题都出在“li”这个标签上。正如它的汉语发音一样“离”，哈哈就是我就不喜欢呆在一起，就想有一段距离。
所以在css编写之前，需要对一些css属性样式进行初始化的操作，将它默认的边距清空。

参考例子：

<style type="text/css">
#nav { height:50px; background:#ccc; width:300px; overflow:hidden; position:relative; }
.list { float:left; margin-left:10px; width:130px; height:25px; background:red; margin-bottom:10px; position:relative; display:inline; }
</style>
<div id="nav">
       <div class="list"></div>
       <div class="list"></div>
       <div class="list"></div>
       <div class="list"></div>
</div>

进度：100% 返回程序猿

解决织梦图集中上传图片时跳出302错误

phpcms v9.0 安装时不能够进行数据库的连接

图片新热点

网站自定字体，压缩字库让网页字体与图标 *.EOT是一种压缩字库，目的是解决在网页中嵌入特殊字体的难题。例如：网页前端开发人员在网页中使用... 查看详情
酷能微日志V1.1发布 酷能微日志V1.1发布一，PHP文件，无需数据库(日志生成TXT文件保存在DATA里)。3个文件搞... 查看详情
PHPCMS调用自动广告的问题 可以专门建立一个或者几个栏目，用于放置不同的广告。在后台建立栏目时，可以先填写广告栏目的ID，在加... 查看详情
js 图片带点幻灯播放效果，适合做BA 这个效果很适合BANNER，可以加连接，也可以做幻灯片。有图有真相：... 查看详情
【原创】phpcmsv9 关于站群同布 1.首先，建立一个发步点，填写FTP相关地址，为的是能够发步到你网站空间里。这样子你的网站就不要后... 查看详情

IE6下overflow:hidden无效问题终极解决之道

图片新热点

导航

目录