问题产生原因:
当父元素的直接子元素或者下级子元素的样式拥有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. zookeeper和dubbo的关系

    Dubbo建议使用Zookeeper作为服务的注册中心. 1.   Zookeeper的作用:         zookeeper用来注册服务和进行负载均衡,哪一个服务由哪一个机器来提供必需让调用者知 ...

  2. UML类图实例分析

    登录模块 某基于C/S的即时聊天系统登录模块功能描述如下: 用户通过登录界面(LoginForm)输入账号和密码,系统将输入的账号和密码与存储在数据库(User)表中的用户信息进行比较,验证用户输入是 ...

  3. 新闻推荐系统：基于内容的推荐算法（Recommender System：Content-based Recommendation）

    https://blog.csdn.net/qq_32690999/article/details/77434381 因为开发了一个新闻推荐系统的模块,在推荐算法这一块涉及到了基于内容的推荐算法(Co ...

  4. hdu2421-Deciphering Password-（欧拉筛+唯一分解定理+积性函数+立方求和公式）

    Deciphering Password Time Limit: 5000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Oth ...

  5. platform_device module

    参考: http://www.wowotech.net/linux_kenrel/platform_device.html 1. platform_device 需要在注册 platform_driv ...

  6. vue 学习笔记1

    1.子组件在父组件的原生的事件例如一个child子组件的点击事件<child @click="handleClick">点击</child>这种情况在父组件 ...

  7. Java的二分查找

    今天学习了二分查找,虽然代码简单,但还是要有必要,记录一下今天的学习的. public class TestBrinarySeach { public static void main(String[ ...

  8. Electrom will-download pause function

    1.code from github url-link: https://github.com/electron/electron/issues/7712 // to store downloadIt ...

  9. 使用idea+gradle建立SSM项目

    目录: 一.创建一个gradle项目   二 .在gradle中创建SSM项目 一 .创建一个gradle项目 第一步: 打开我们的IDEA工具,选择创建一个新项目 第二步:这里会让你选择创建一个什么 ...

  10. asp.net之发送邮件2

    public void SendMail(string from, string to, List<string> cc, string subject, string body) { M ...