解决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有这种现象),让人摸不着头脑,仔细“研究”发现是 ...
随机推荐
- PoshyTip jQuery 文本提示插件的使用
PoshyTip 是JQuery中一款文本提示插件,在Jsp页面使用相当方便,插件内包含了很多外观样式,可以作为FormTooltips使用. 插件包下载地址:http://vadikom.com/f ...
- Win7下通过easyBCD引导安装Ubuntu14.04
Ubuntu14.04作为目前最新版本的ubuntu系统,相信很多人都想在自己的电脑上安装一下,然而系统的安装方法各式各样,u盘法.grub引导法等等,这里我将介绍在win7系统下用easyBCD软件 ...
- Mac系统安装Lua(转)
下载最新版的lua请点击,然后解压 运行“终端”进入到该文件夹下 ,主要是cd [文件夹名] 在“终端”输入 make macosx (回车) 在“终端”输入 make test (回车) 然后再输入 ...
- Hive的MoveTask错误
最近在部署Hive上线,结果在线上线下同时出现了MoveTask报错的现象,虽然两者错误的日志以及错误信息一样,但是经过分析解决又发现两者的原因是不一样的. 首先线下的错误日志: 2015-05-18 ...
- asp.net学习
http://www.cnblogs.com/fish-li/archive/2011/12/27/2304063.html
- bzoj 3669: [Noi2014]魔法森林 动态树
3669: [Noi2014]魔法森林 Time Limit: 30 Sec Memory Limit: 512 MBSubmit: 363 Solved: 202[Submit][Status] ...
- Two shortest
sgu185:http://acm.sgu.ru/problem.php?contest=0&problem=185 题意:找两条最短路径,没有边相交的最短路劲,并且输出路径. 题解:这一题和 ...
- March of the Penguins
poj3498:http://poj.org/problem?id=3498 题意:某个冰块上有a只企鹅,总共可以跳出去b只,问是否可能所有的企鹅都跳到某一块冰块上,输出所有的可能的冰块的编号. 由于 ...
- Node.js权威指南 (5) - 使用Buffer类处理二进制数据
5.1 创建Buffer对象 / 705.2 字符串的长度与缓存区的长度 / 725.3 Buffer对象与字符串对象之间的相互转换 / 74 5.3.1 Buffer对象的toString方法 / ...
- Spark RCFile的那些“坑”
RCFile在平台的应用场景中多数用于存储需要“长期留存”的数据文件,在我们的实践过程中,RCFile的数据压缩比通常可以达到8 : 1或者10 : 1,特别适用于存储用户通过Hive(MapRedu ...