解决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有这种现象),让人摸不着头脑,仔细“研究”发现是 ...
随机推荐
- javascript 学习笔记之面向对象编程(一):类的实现
~~想是一回事,做是一回事,写出来又是一回事~~一直以来,从事C++更多的是VC++多一些,从面向过程到面向对象的转变,让我对OO的编程思想有些偏爱,将一个客观存在的规律抽象出来总是让人比较兴奋,通过 ...
- <string> <string.h>
在C++开发过程中经常会遇到两个比较容易混淆的头文件引用#include<string.h> 和 #include<string>,两者的主要区别如下: #include< ...
- iOS: 学习笔记, 动态添加按钮
1. 新建iOS -> Single View Application. 2. 个性控制器文件YYViewController.m(此处修改为你相应的控制器文件名) // // YYViewCo ...
- C# Dispose Finalize
比较值得参考的文档:http://www.jb51.net/article/37214.htm. .NET 的内存管理过程: 托管堆假设内存无限大,线性连续分配内存: 实际内存不够使用时,遍历托管堆对 ...
- EFBaseDal
public class BaseDal<T> where T : class, new() { DataModelContainer db = new DataMod ...
- 程序集“xxx"中的类型"xxx"的方法“XXXX”没有实现
通过反射调用一个类库时出现这样的报错,检查了一下类中已经实现了此方法,实现的方法如下: public partial class LogList : DockContent, ILogForm { p ...
- 一个C++程序员学习C#语言
感悟:C++是一门语法非常严谨的语言,只是指针就很难掌握,这其中肯定要经历很多折腾,特别是自学者. 折腾了一年半的C++,在即将毕业之际,对Unity3d游戏开发感兴趣,先是用cocos2dx开发了个 ...
- jquery实现表格可变列宽插件开发
工作中用到了表格的可变列宽,网上看了下,自己也实现了一个,整理贴记录. 测试环境chrome,ie8,firefox jquery版本1.8.2 原理:监听table第一行的mousemove事件,当 ...
- 【poi】解决java导出excel 海量数据内存溢出问题
转自百度经验:http://jingyan.baidu.com/article/4853e1e5202c331909f72627.html 那里排版忒恶心,转来这里. 由于项目中有导出海量数据的需求, ...
- Gradle在大型Java项目上的应用
在Java构建工具的世界里,先有了Ant,然后有了Maven.Maven的CoC[1].依赖管理以及项目构建规则重用性等特点,让Maven几乎成为Java构建工具的事实标准.然而,冗余的依赖管理配置. ...