问题产生原因:
当父元素的直接子元素或者下级子元素的样式拥有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. UML类图实例分析

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

  2. 【389】Implement N-grams using NLTK

    Ref: Natural Language Toolkit Ref: n-grams in python, four, five, six grams? Ref: "Elegant n-gr ...

  3. 强制停止ORACLE数据库

    操作环境 SuSE+Oracle11gR2 适用场景 shutdown immediate停止数据库失败 操作命令 1.kill掉oracle实例相关进程 2.清除oracle占用的共享内存段 ipc ...

  4. hibernate criteria Restrictions工具类用法

    CriteriaQuery cq = new CriteriaQuery(TSUser.class, dataGrid); // 查询条件组装器 org.jeecgframework.core.ext ...

  5. cv2对图像进行旋转和放缩变换

    旋转: def get_image_rotation(image): #通用写法,即使传入的是三通道图片依然不会出错 height, width = image.shape[:2] center = ...

  6. BOS物流项目第十三天

    教学计划 1.Quartz概述 a. Quartz介绍和下载 b. 入门案例 c. Quartz执行流程 d. cron表达式 2.在BOS项目中使用Quartz创建定时任务 3.在BOS项目中使用J ...

  7. 内核 platform_get_resource() 函数解析

    struct resource *platform_get_resource(struct platform_device *dev,            unsigned int type, un ...

  8. 12.13java过关测试

    库存物资管理系统: 1.首先建两个数据表,一个pass用于商品的增删改查,一个passd记录商品的出库与入库信息: 2.建两个实体类,用来传递商品与单据的信息 3.在添加与删除时,填写入库或者出库单据 ...

  9. json转换工具类：json<===>list或者对象

    public class JsonTools { /** * POJO 转 JSON */ public static String createJsonString(Object object) { ...

  10. nodejs windows安装

    [安装步骤] 一.安装node.js 1.前往node.js官网下载(我下载的是v10.8.0)并安装工具,这里安装路径选到D盘,e:\Program Files\nodejs 安装完毕在命令行输入以 ...