ie6下浮动使绝对定位元素莫名消失的问题-阿里云开发者社区

开发者社区> 最美的回忆> 正文

ie6下浮动使绝对定位元素莫名消失的问题

简介:
+关注继续查看

这是我以前博客里写的东西,现在搬过来和大家分享一下!

逐步解决遇到的各种bug,是web前端开发者逐步成长的过程!

今天在做项目时,遇到了ie6下绝对定位元素莫名消失的问题,在此写个简单的例子说明一下此类问题的解决办法。
 
如果我们想得到如下效果该怎么办呢?

 
 
1   首先是基本的布局,此处不细说了。如果我们想让最外面的框具有可扩展性,即红色的框不设置高度,我们该怎么办呢?通常我  们有一下几个办法来解决浮动子标签自动撑开父标签高度的问题:
a 在子标签最后加一个清浮动的div{<div style="height:0;clear:both;overflow:hidden;"></div>}。
b 父标签css样式添加{overflow:hidden;}。
d 给父标签设置float属性。(如果父标签浮动了,可能对布局有影响,需要在父标签外再套一个让整体居中的标签。)
2   通常为了减少工作量,少敲几个代码,我都会选择在父标签css样式中添加{overflow:hidden;}。但今天在做项目时,遇到了麻烦。首先看一下我最初的写法。
<style type="text/css">
/*重置{*/
html{color:#000;background:#fff;}
body,div{padding:0;margin:0;}
.clear{clear:both;height:0px;overflow:hidden;}
/*}重置*/
.outer{width:1040px;border:1px red solid;position:relative;margin:20px auto;}
.con2{width:600px;height:200px;float:left;border:1px blue solid;margin:20px;display:inline;}
.con1,.con3,.con4,.con5{width:300px;height:200px;float:left;border:1px blue solid;margin:20px;display:inline;}
.mask{width:300px;height:200px;background:#f00;opacity:0.5;filter:alpha(opacity=50);position:absolute;left:-100px;top:40px;color:#fff;line-height:200px;text-align:center;font-size:30px;}
</style>
</head>
<body>
<div class="outer">
<div class="con1"></div>
<div class="con2"></div>
<div class="con3"></div>
<div class="con4"></div>
<div class="con5"></div>
<div class="mask">我是蒙版层</div>
<div class="clear"></div>
</div>
</body>
看一下ie6下效果:

 
我们会发现蒙版层有一部分被遮住了,且ie6下红色框的底部与里面子元素的空隙也没有了(非ie6中有),也就是说,子元素没有把父元素的高度完全撑开。蒙版层被遮住是因为我们在父标签css样式中添加了{overflow:hidden;}。
为了解决这两个问题,我就把父标签css样式{overflow:hidden;}删除,并且在最后一个子元素后面添加一个div,<div class="clear"></div>,clear的css样式为.clear{clear:both;height:0px;overflow:hidden;}。此时神奇的ie6发挥它神奇的作用了:蒙版层消失了!!见图:

此时chrome中的效果(正常显示)如下:
 

 
为了解决这一问题,我在网上搜寻答案,原来这是一个老bug了,大神们给出了答案:绝对定位的元素跟浮动的兄弟标签之间插入一个空的div标签就ok了。至此需要解决的问题解决了。
总结来说,最好的解决方法就是在最后加入一个清浮动的div(CSS: .clear{clear:both;height:0;overflow:hidden;} HTML:<div class="clear"></div>),在绝对定位的元素和浮动元素间加入一个空div<div style="height:0;overflow:hidden;"></div>。
 
有趣的现象在写这个例子的过程中,我发现了一个有趣的现象如果我们给这个蒙版加个半透明的效果,css样式如下:{opacity:0.5;filter:alpha(opacity=50);}。当我们删除以上所说的那个空div,定位的蒙版层依然存在。也就是说filter滤镜起到了作用。
总之一句话:ie6很神奇,需要我们不断的摸索。希望有一天,ie6能去找上帝玩!!
本文转自挨踢前端博客园博客,原文链接http://www.cnblogs.com/duanhuajian/archive/2012/09/04/2670682.html如需转载请自行联系原作者

@挨踢前端

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
LeetCode 380: 常数时间插入、删除和获取随机元素 Insert Delete GetRandom O(1)
题目: 设计一个支持在平均 时间复杂度 O(1) 下,执行以下操作的数据结构。 insert(val):当元素 val 不存在时,向集合中插入该项。 remove(val):元素 val 存在时,从集合中移除该项。
693 0
Selenium2+python自动化8-SeleniumBuilder辅助定位元素
前言 福利来了,对于用火狐浏览器的小伙伴们,你还在为定位元素而烦恼嘛? 上古神器Selenium Builder来啦,哪里不会点哪里,妈妈再也不用担心我的定位元素问题啦!(但是也不是万能,基本上都能覆盖到)一、安装Selenium Builder 在火狐浏览器的附加组件中搜索添加Selenium Builder即可。
1176 0
《jQuery Cookbook中文版》——1.11 删除DOM元素
在使用remove()从DOM中删除选择的元素时,它们并没有从jQuery包装器集中删除。这意味着,从理论上说,可以继续操作它们,甚至可以在必要的时候将它们重新添加到DOM中。
1245 0
jquery 遍历dom元素
$('#navBarID').children()  //选定元素的所有孩子节点 $('#navBarID').children().eq(i) //选定元素的第i个孩子节点,从0计数
857 0
《jQuery Cookbook中文版》——1.10 创建、操作和插入DOM元素
在本秘诀中,向jQuery函数传递原始HTML字符串,这一参数被方法用来在运行中创建DOM元素。 还可以简单地向jQuery函数传递一个由DOM方法createElement()创建的DOM对象:
1134 0
2286
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载