问题产生原因:
当父元素的直接子元素或者下级子元素的样式拥有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. java.lang.ClassNotFoundException: org.hibernate.engine.SessionFactoryImplementor

    Hibernate4.x与spring3.x整合,有关事务的处理,用Junit4测试,出现org.springframework.beans.factory.BeanCreationException ...

  2. LeetCode OJ 93. Restore IP Addresses

    题目 Given a string containing only digits, restore it by returning all possible valid IP address comb ...

  3. 全面对比T-SQL与PL/SQL

    1)数据类型 TSQL PL/SQL numeric(p,s) numeric(p,s) or NUMBER(p,s) decimal(p,s) decimal(p,s) or NUMBER(p,s) ...

  4. C#中让WebBrowser运行Javascript脚本

    C#中可以让Webbrowser运行Javascript脚本来实现各种自动化操作,比如点击网页上的按钮,输入用户名密码等等.代码也很简单: >>>>>>>&g ...

  5. C# DataTable To Entities

    原地址忘了,修改过了一下. new: public static class DataTableEntityInteroperate { public static List<T> ToE ...

  6. lcd 控制器

    1. 使用lcd 一般需要一个控制器和驱动器,控制器需要初始化以产生正确的时序,驱动器一般是和lcd基板制作在一起. LCD 控制器结构图: REGBANK 表示调色板 LCDDMA 表示DMA通道 ...

  7. javase中javax源码下载地址

    OracleJDK 和 OpenJDK 源码都可以参考. OpenJDK 源码下载 http://hg.openjdk.java.net/jdk7/jdk7/jdk/file 我主要是想下载 java ...

  8. java基本数据间转换

    string=====>int int x = Integer.parseInt(“1111”); string=====>char char x = request.getParamet ...

  9. Appium1.6 定位iOS元素和操作元素

    元素定位方式  第一种:通过Appium1.6的Inspector来查看 具体安装方式前面的随笔已经介绍了:http://www.cnblogs.com/meitian/p/7360017.html ...

  10. PHPActiveRecord 学习二

    ORM关联查询 a.一对多 针对外键来说 谁属于谁 谁有谁 user表 CREATE TABLE `user` ( `uid` int(11) NOT NULL AUTO_INCREMENT, `na ...