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；}。但今天在做项目时，遇到了麻烦。首先看一下我最初的写法。

/*重置{*/

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="mask">我是蒙版层</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能去找上帝玩！！

posted on 2012-09-04 17:04 挨踢前端阅读(3492) 评论(1) 编辑收藏举报

刷新页面返回顶部

Hello World

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

公告

导航