解决IE6,IE7不能隐藏绝对定位溢出的内容
令人蛋疼的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不能隐藏绝对定位溢出的内容的更多相关文章
- 解决IE6 IE7绝对定位弹层被后面的元素遮住
解决IE6 IE7绝对定位弹层被后面的元素遮住? 弹层边框一直被后面的元素边框遮住,试了n种方法,只有这个比较好用. <div class="tuijian-table"&g ...
- 解决IE6/IE7/IE8不支持before,after问题
对从事web开发的朋友来讲,低版本的IE永远是一个痛点,不支持最新技术(如css3,html5). 在现在web开发中使用图标字体已经很广泛,如Font Awesome,Bootstrap等,字体图片 ...
- 解决IE6,IE7下子元素使用position:relative、父元素使用overflow:auto后,子元素不随着滚动条滚动的问题
解决IE6,IE7下子元素使用position:relative.父元素使用overflow:auto后,子元素不随着滚动条滚动的问题 在IE6,IE7下,子元素使用position:relati ...
- 一句white-space:nowrap解决IE6,IE7下浮动元素不自动换行
一句white-space:nowrap解决IE6,IE7下浮动元素不自动换行
- 解决IE6 IE7 JSON.stringify JSON 未定义问题
在项目中引入json2.js 官方http://www.json.org/ 源码地址:https://github.com/douglascrockford/JSON-js $.ajax({ url: ...
- clearfix 兼容IE6/IE7,解决ie6/ie7下多出一行的问题,bootstrap的clearfix的bug
.clearfix:before, .clearfix:after { content: "."; display: block; height: ; overflow: hidd ...
- ie6,ie7,ie8 css bug兼容解决方法
IE浏览器以不支持大量的css 属性出名,同时也因其支持的css属性中存在大量bug. 这里收集了好多的bug以及其解决的办法,都在这个文章里面记录下来了!希望以后解决类似问题的时候能够快速解决,也希 ...
- ie6,ie7,ie8 css bug兼容解决记录
ie6,ie7,ie8 css bug兼容解决记录 转载自:ie6,ie7,ie8 css bug兼容解决记录 - 前端开发 断断续续的在开发过程中收集了好多的bug以及其解决的办法,都在这个文章里面 ...
- ie6,ie7,ie8 css bug汇总以及兼容解决方法
1:li边距“无故”增加 任何事情都是有原因的,li边距也不例外. 先描述一下具体状况:有些时候li边距会突然增 加很多,值也不固定(只在IE6/IE7有这种现象),让人摸不着头脑,仔细“研究”发现是 ...
随机推荐
- ext 金额大写
//数字转换成大写金额函数 function atoc(numberValue) { numberValue = numberValue.replace(/,/g,''); numberValue = ...
- #Leet Code# LRU Cache
语言:C++ 描述:使用单链表实现,HeadNode是key=-1,value=-1,next=NULL的结点.距离HeadNode近的结点是使用频度最小的Node. struct Node { in ...
- ARC - MRC
1. 选择工程 ---> build phases --> .m中添加 -fno-objc-arc
- SQL Server索引 (原理、存储)聚集索引、非聚集索引、堆
http://www.cnblogs.com/kissdodog/archive/2013/06/12/3132380.html
- android的原理,为什么不需要手动关闭程序
转自android的原理,为什么不需要手动关闭程序 不用在意剩余内存的大小,其实很多人都是把使用其他系统的习惯带过来来了. Andoird大多应用没有退出的设计其实是有道理的,这和系统对进程的调度机制 ...
- java基础随笔-内部类
今天来复习下内部类的一些基础知识. 首先是内部类的分类: 1.成员内部类 2.静态内部类 3.匿名内部类 4.局部内部类 下面逐一来介绍下. 首先是成员内部类,就是将内部类作为一个成员变量来处理.具体 ...
- Android 正则表达式匹配汉字中文
关于中文的正则表达式, 应该是^[\\u4E00-\\u9FFF]+$, 和论坛里常被人提起的^[\\u4E00-\\u9FA5]+$很接近需要注意的是论坛里说的^[\\u4E00-\\u9FA5]+ ...
- Eclipse构建Activiti项目,类导入提示功能不能使用
Eclipse新建一个新的Activiti项目(Activiti项目默认使用Maven管理项目),接着配置好pom.xml添加需要的jar包依赖,引入依赖之后发现在测试类中没有提示导入所需要的包的选项 ...
- random随机函数
SQL> select * from (select ename,job from emp order by dbms_random.value() ) where rownum <5 2 ...
- IPCS资源
ipcrm用法 ipcrm -M shmkey 移除用shmkey创建的共享内存段 ipcrm -m shmid 移除用shmid标识的共享内存段 ipcrm -Q msgkey 移除用ms ...