令人蛋疼的IE，IE6/IE7下父元素有相对/绝对定位时，子元素在IE6和IE7下overflow:hidden;失效。

情况一：（在parent上增加position:relative）

<style type="text/css">

	.parent{ width:100px; height:100px;border:1px solid #f00; overflow:hidden; position:relative;}

	.sonF{ position:relative;}

	.son{ width:100px; height:100px; position:absolute; left:0;top:0;}

	p{margin:0;padding:0;}

</style>

</head>

<body>

<div class="parent">

    <div class="sonF">

        <div class="son">

            <p>aaaaaaaaaaaaaa</p>

            <p>aaaaaaaaaaaaaa</p>

            <p>aaaaaaaaaaaaaa</p>

            <p>aaaaaaaaaaaaaa</p>

            <p>aaaaaaaaaaaaaa</p>

            <p>aaaaaaaaaaaaaa</p>

            <p>bbbb</p>

            <p>bbbbb</p>

        </div>

    </div>

</div>

情况二：（给son增加position:relative）

<style type="text/css">

	.parent{ width:100px; height:100px; position:absolute; border:1px solid #f00;}

	.son{ width:100px; height:100px;left:0;top:0; overflow:hidden; position:relative;}

	p{margin:0;padding:0;}

</style>

<div class="parent">

    <div class="son">

        <p>aaaaaaaaaaaaaa</p>

        <p>aaaaaaaaaaaaaa</p>

        <p>aaaaaaaaaaaaaa</p>

        <p>aaaaaaaaaaaaaa</p>

        <p>aaaaaaaaaaaaaa</p>

        <p>aaaaaaaaaaaaaa</p>

        <p>aaaaaaaaaaaaaa</p>

        <p>aaaaaaaaaaaaaa</p>

    </div>

</div>

如下图：

如果.parent中的position设置为absolute也是如此。

终上所述：

哪个需要设置overflow；hidden，生效，就在哪个上面设置position:relative;

解决IE6,IE7不能隐藏绝对定位溢出的内容的更多相关文章

  1. 解决IE6 IE7绝对定位弹层被后面的元素遮住

    解决IE6 IE7绝对定位弹层被后面的元素遮住? 弹层边框一直被后面的元素边框遮住,试了n种方法,只有这个比较好用. <div class="tuijian-table"&g ...

  2. 解决IE6/IE7/IE8不支持before,after问题

    对从事web开发的朋友来讲,低版本的IE永远是一个痛点,不支持最新技术(如css3,html5). 在现在web开发中使用图标字体已经很广泛,如Font Awesome,Bootstrap等,字体图片 ...

  3. 解决IE6,IE7下子元素使用position:relative、父元素使用overflow:auto后，子元素不随着滚动条滚动的问题

    解决IE6,IE7下子元素使用position:relative.父元素使用overflow:auto后,子元素不随着滚动条滚动的问题   在IE6,IE7下,子元素使用position:relati ...

  4. 一句white-space:nowrap解决IE6,IE7下浮动元素不自动换行

    一句white-space:nowrap解决IE6,IE7下浮动元素不自动换行

  5. 解决IE6 IE7 JSON.stringify JSON 未定义问题

    在项目中引入json2.js 官方http://www.json.org/ 源码地址:https://github.com/douglascrockford/JSON-js $.ajax({ url: ...

  6. clearfix 兼容IE6/IE7，解决ie6/ie7下多出一行的问题，bootstrap的clearfix的bug

    .clearfix:before, .clearfix:after { content: "."; display: block; height: ; overflow: hidd ...

  7. ie6,ie7,ie8 css bug兼容解决方法

    IE浏览器以不支持大量的css 属性出名,同时也因其支持的css属性中存在大量bug. 这里收集了好多的bug以及其解决的办法,都在这个文章里面记录下来了!希望以后解决类似问题的时候能够快速解决,也希 ...

  8. ie6,ie7,ie8 css bug兼容解决记录

    ie6,ie7,ie8 css bug兼容解决记录 转载自:ie6,ie7,ie8 css bug兼容解决记录 - 前端开发 断断续续的在开发过程中收集了好多的bug以及其解决的办法,都在这个文章里面 ...

  9. ie6,ie7,ie8 css bug汇总以及兼容解决方法

    1:li边距“无故”增加 任何事情都是有原因的,li边距也不例外. 先描述一下具体状况:有些时候li边距会突然增 加很多,值也不固定(只在IE6/IE7有这种现象),让人摸不着头脑,仔细“研究”发现是 ...

随机推荐

  1. JQ插件ajaxFileUpload、php实现图片，数据同时上传

    代码结构如下: 1.HTML代码,没必要解释了. <!DOCTYPE html> <html> <head> <meta charset="UTF- ...

  2. php邮箱找回密码功能

    原理很简单: 用户找回密码的时候,填写用户名,程序得到用户名便可以去数据库取出用户对应的密码以及当时填写的邮箱, 根据用户名和密码生成一个key=md5(username+password),然后$s ...

  3. Ajax请求ashx一般处理程序实现文件下载

    具体功能为,在文件数据列表中选择一行,点击表格上方的下载按钮,下载文件.由于表格中不包含文件路径,只能取到在数据库表中的ID,所以具体实现就是这样:首先点击一行,获取点击的一行数据的ID,用Ajax传 ...

  4. 练习2 F题 - 平方和与立方和

      Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u   Description 给定一 ...

  5. 学习总结之Log4NET

    通过在网上查找了一些资料,用了些时间学习了log4NET,做了一个小小的总结,说一下它的特点吧 首先呢log4NET是.Net下一个非常优秀的开源日志记录组件.它可以将日志分成不同等级,也可以按照我们 ...

  6. 关于Memcache使用的工具类

    分布式缓存有它自己的好处 . 下面的 ConstValue.sessionId  是一个常量 public static readonly string sessionId = "sessi ...

  7. patchca整合Spring MVC生成超炫的验证码

    转载:http://lavasoft.blog.51cto.com/62575/1406947 @Controller public class Login2Controller {     priv ...

  8. 切换view的动画

    代码: #import "MainViewController.h" @interface MainViewController () @end @implementation M ...

  9. BZOJ 4013 实验比较

    Description 小D被邀请到实验室,做一个跟图片质量评价相关的主观实验.实验用到的图片集一共有\(N\)张图片,编号为\(1\)到\(N\).实验分若干轮进行,在每轮实验中,小\(D\)会被要 ...

  10. MEMS Gyroscope Technology

    InvenSense®Technology Overview Our technology is comprised of five coreelements: our patented Nasiri ...