下面就是我所收集或遇到的IE6 Bug之一:overflow:hidden失效

当父元素的直接子元素或者下级子元素的样式拥有position:relative属性时,父元素的overflow:hidden属性就会失效。

CSS代码

复制代码代码如下:
#parent{height:50px;overflow:hidden;}
#child a{position:relative;}

HTML代码

复制代码代码如下:
<div id="parent">
<div id="child">
<a href="http://www.baidu.com/">百度</a>

<a href="http://www.jb51.net/">脚本之家</a>

<a href="http://s.jb51.net/">服务器</a>

<a href="http://tools.jb51.net">查询工具</a>

<a href="http://www.jb51.net/softs">软件下载</a>

<a href="http://www.jb51.net/codes">源码下载</a>

</div>
</div>

我们在IE 6内发现子元素会超出父元素设定的高度,即使父元素设置了overflow:hidden。
解决这个bug很简单,在父元素中使用position:relative;即可解决该bug

即css

复制代码代码如下:
#parent{height:50px;overflow:hidden;position:relative;}
#child a{position:relative;}

IE6 Bug overflow:hidden失效的更多相关文章

  1. IE6,IE7上设置body{overflow:hidden;}失效Bug

    IE6,IE7下设置body{overflow:hidden;}失效Bug 最近做项目发现在IE7下设置body{overflow:hidden;}后还是会出现纵向滚动条,所以上网查查了,在这里记录一 ...

  2. overflow:hidden失效问题

    2018-08-03 Questions about work 这几天开发的时候遇到了个问题,如图1. 写了个demo demo 地址 由于页面并没有进行整体缩放,导致在小屏幕手机上显示会有异常.PM ...

  3. overflow:hidden失效

    overflow:hidden失效 为了页面的健壮性,我们常常需要使用overflow:hidden.有时候是为了防止布局被撑开,有时候是为了配合其它规则实现文字截断,还有时候纯粹是为了创建块级上下文 ...

  4. IE6、7下overflow:hidden失效的问题

    问题产生原因: 当父元素的直接子元素或者下级子元素的样式拥有position:relative或者position:absolute属性时,父元素的overflow:hidden属性就会失效. 例如: ...

  5. IE下设置body{overflow:hidden;}失效Bug

    问题重现: <p>There are no scrollbars on this page in sane browsers</p> html, body, p { margi ...

  6. 在ie7中overflow:hidden失效问题及解决方案

    css兼容ie7: 做页面的时候用负边距居中的时候在IE7下面,父节点中的overflow:hiden失效的问题,查阅了一些资料,总结一下解决方法. 问题原因: 当父元素的直接子元素或者下级子元素的样 ...

  7. 解决 border-radius 元素在应用了 transform 的子元素 时overflow:hidden 失效的问题

    受大家启迪,于是最近深入研究了一下Css3中的一些属性.之中也是碰到了个不为我知的问题,在这里特此总结并与大家分享. 问题重现:在父元素上应用了 border-radius 的圆角属性.加上  ove ...

  8. css ie7中overflow:hidden失效问题及解决方法

    css兼容ie7: 做页面的时候用负边距居中的时候在IE7下面,父节点中的overflow:hiden失效的问题,查阅了一些资料,总结一下解决方法. 问题原因: 当父元素的直接子元素或者下级子元素的样 ...

  9. border-radius导致overflow:hidden失效问题。

    如果一个父元素设置了overflow:hidden属于的同时还设置了border-radius属性,那么如果想隐藏超出的子元素,四个圆角处会出现超出圆角依然显示的bug: 一种方法是运用-webkit ...

随机推荐

  1. hdoj 3336 Count the string【kmp算法求前缀在原字符串中出现总次数】

    Count the string Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...

  2. iOS全景

    一张鱼眼图或者6方图,展现出来的全景影像效果图 PanoramaGL PanoramaGL是世界上第一个开源的实现360度全景图像的iOS.Android类库.基于OpenGL 支持球,立方体,圆柱. ...

  3. extjs6.0点击grid一行数据显示在一端的form中

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. SAP ABAP 程序调用FORM

    *&---------------------------------------------------------------------* *& Report ZHAIM_FOR ...

  5. Android Studio 1.0.2 设置内存大小

    http://www.linuxidc.com/Linux/2015-04/116457.htm Android studio 1.0.2默认最大内存是750M,这样跑起来非常的卡,难以忍受,机器又不 ...

  6. text code

    https://github.com/Itseez/opencv/blob/master/modules/objdetect/src/erfilter.cpp

  7. Android开发具体解释之ListView具体解释一

    列表ListView介绍和实例  1.ListView  -- ListActivity -- ListAdapter  2.ArrayAdapter结合ListView进行显示  3.SimpleA ...

  8. HDU 1576 A/B 扩展欧几里德算法

    A/B Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Submis ...

  9. cocos2dx游戏项目总结(持续更新)

    1.在一个layer里面,尽量只使用一种按钮类型.如MenuItem or CCControlButton.因为这两种按钮的优先级不同,在使用过程中会互相影响到事件触发的先后顺序. 2.细节的问题要一 ...

  10. Android开发之ViewPager实现多页面切换及动画效果(仿Android的Launcher效果)

    Android开发中经常会有引导页或者切换页面等效果,本文采用ViewPager结合动画效果来实现仿Launcher以及页面切换的效果.源码地址在文章最后给出下载. 效果图如下:       1.Vi ...