下面就是我所收集或遇到的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. json xmpp

    https://github.com/lamfire/jspp http://blog.csdn.net/nomousewch/article/category/823687 http://my.os ...

  2. LabVIEW设计模式系列——状态机

    标准:1.状态用枚举自定义类型,便于统一管理修改.2.一般地应该有:Initialize,Idle,Stop,Blank状态.3.Initialize进行一些初始化的操作:Idle一种过渡状态,用于和 ...

  3. 使用lua给wireshark编写uTP的Dissector

      lonelycastle做uTP的实验,使用wireshark捕包,但是最初没有找到wireshark下的uTP的dissector,每次都需要比对文档,这样做实验理解报文含义,效率非常低.作为程 ...

  4. Java基础知识强化之网络编程笔记05:UDP之多线程实现聊天室案例

    1. 通过多线程改进刚才的聊天程序,这样我就可以实现在一个窗口发送和接收数据了 2.  代码示例: (1)SendThread.java,如下: package com.himi.udpDemo2; ...

  5. Android 高级UI设计笔记01:使用ExpandableListView组件(ListView的扩展)

    1.ExpandableListView是一个用来显示二级节点的ListView. 比如如下效果的界面: 2.使用ExpandableListView步骤 (1)要给ExpandableListVie ...

  6. 输入一个字符串,去掉重复的字符,并按ASCII值排序-华为机试

    import java.util.Scanner; //输入字符串,去掉重复的字符,并按ASSIC码值排序 public class quChong { public static void main ...

  7. CentOS 6.7 安装配置BT下载工具Transmission

    1.配置额外yum源 i386 cd /etc/yum.repos.d/ wget http://geekery.altervista.org/geekery-el6-i686.repo x86_64 ...

  8. python 内置函数和表达式

    对于简单的函数来说,可以使用类似于三元运算来表示,即: lambda表达式 格式: lambda [arg1[, arg2, ... argN]]: expression   先来看看三元表达式 #普 ...

  9. Factory Method 工厂方法模式

    Factory method工厂方法模式是一种实现了“工厂”概念的面向对象设计模式.就像其他创建型模式一样,它也是处理在不指定对象具体类型的情况下创建对象的问题.工厂方法模式的实质是“定义一个创建对象 ...

  10. Vector使用

    ArrayList会比Vector快,他是非同步的,如果设计涉及到多线程,还是用Vector比较好一些 Vector 类提供了实现可增长数组的功能,随着更多元素加入其中,数组变的更大.在删除一些元素之 ...