问题产生原因:
当父元素的直接子元素或者下级子元素的样式拥有position:relative或者position:absolute属性时，父元素的overflow:hidden属性就会失效。
例如：
<!DOCTYPE html>

<html lang="zh">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

    * {margin: 0; padding: 0;}

    .father {width: 200px; height: 200px; background: red; overflow: hidden;}

    .child {width: 300px; height: 300px; background: blue; position: absolute;}

</style>

</head>

<body>

    <div class="father">

        <div class="child"></div>

    </div>

</body>

</html>

在chrome下显示如下：

由于我的系统是win7，没有装IE6、7，不过IE有一个开发者工具，按F12。
这样我们刷新浏览器看看。

父元素的over:hidden;并没有启作用。

 
解决方案:
给父元素加上position:relative或者position:absolute就可解决。
IE6、7下，overflow:hidden所在容器必须固定高度，宽度。
<!DOCTYPE html>

<html lang="zh">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

    * {margin: 0; padding: 0;}

    .father {width: 200px; height: 200px; background: red; overflow: hidden; position: relative;}

    .child {width: 300px; height: 300px; background: blue; position: absolute;}

</style>

</head>

<body>

    <div class="father">

        <div class="child"></div>

    </div>

</body>

</html>
这样父元素的overflow就启作用了。

IE6、7下overflow:hidden失效的问题的更多相关文章

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

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

  2. IE6 Bug overflow:hidden失效

    下面就是我所收集或遇到的IE6 Bug之一:overflow:hidden失效 当父元素的直接子元素或者下级子元素的样式拥有position:relative属性时,父元素的overflow:hidd ...

  3. overflow:hidden失效问题

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

  4. overflow:hidden失效

    overflow:hidden失效 为了页面的健壮性,我们常常需要使用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失效问题

    父元素使用border-radius和overflow:hidden做成圆形,子元素如果使用了transform属性,则父元素的overflow:hidden会失效. 解决方法: 父元素使用 -wei ...

随机推荐

  1. HTML实现页面自动跳转的五种方法

    下面列了五个例子来详细说明,这几个例子的主要功能是:在5秒后,自动跳转到同目录下的hello.html(根据自己需要自行修改)文件. 1)html的实现 复制代码 代码如下: <head> ...

  2. 使用hibernate与mysql时数据不能插入的原因及解决办法

    1.背景 之前从没用过hibernate,因此在网上搜了一下hibernate快速入门方面的信息,最后我按照<Myeclipse Hibernate 快速入门 中文版>(CSDN,百度文库 ...

  3. Django后台邮箱配置

    Django可以通过发送邮件的方式找回密码,具体细节可以看Django的文档,这里只介绍在settings.py中如何正确进行邮箱的相关配置. 网上很多教程都说了需要在settings.py里添加如下 ...

  4. SQL Server 用角色(Role)管理数据库权限

    当数据库越来越多,连接到数据库的应用程序,服务器,账号越来越多的时候,为了既能达到满足账号操作数据权限需求,又不扩大其操作权限,保证数据库的安全性,有时候需要用角色来参与到权限管理中,通过角色做一个权 ...

  5. 24.类的加载机制和反射.md

    目录 1类的加载连接和初始化 1.1类的加载过程 1.2类的加载器 1.2.1类的加载机制 1类的加载连接和初始化 1.1类的加载过程 类的加载过程简单为分为三步:加载->连接->初始化 ...

  6. 吴裕雄 python 数据处理（3）

    import time a = time.time()print(a)b = time.localtime()print(b)c = time.strftime("%Y-%m-%d %X&q ...

  7. ADO.Net 数据库查询

    数据库中的表: VS查询代码: using System; using System.Collections.Generic; using System.Linq; using System.Text ...

  8. 有用的url地址

    https://docs.oracle.com/javase/7/docs/api/overview-summary.html https://docs.oracle.com/javase/8/doc ...

  9. oracle wm_concat() 返回空

    参考 https://www.cnblogs.com/zengweiming/archive/2013/11/20/3433642.html select wm_concat(to_char(str) ...

  10. nodejs中.npmrc文件的内容

    . nodejs安装后,使用npm安装模块的时候我出现了一个错误. getaddrinfo ENOTFOUND xxx 主要是这个配置文件的问题.搞不清楚.直接打开把文件内容删除变成 npmrc文件内 ...