如何解决IE6 bug —消失的绝对定位元素
时间:2011-05-22
来源:互联网
此BUG最初是在《前端观察》网站刊登,这里再描述一下,代码如下:
<style>
*{ padding:0; margin:0;}
.content{width:600px;}
.abs{position:absolute; left:0; top:0; width:600px; height:120px; background:#1f3a87; }
.main{float:left; width:300px; height:200px; background:#f3f3f3; }
.sub{float:left;width:300px; height:200px; background:#bc2931;}
</style>
<div class=”content”>
<div class=”abs”>
abs
</div>
<div class=”main”>
main
</div>
<div class=”sub”>
sub
</div>
</div>
以上代码在IE6下浏览会发现,绝对定位元素不见了。
产生原因不明,当满足以下条件之一可解决:
1、main + sub + 2 < content(各元素的宽度);
2、在main元素之前加一个空的<div></div>,如…<div></div><div class=”main”>…;
3、给abs元素再嵌套一个div元素,如<div><div class=”abs”>abs</div></div>
<style>
*{ padding:0; margin:0;}
.content{width:600px;}
.abs{position:absolute; left:0; top:0; width:600px; height:120px; background:#1f3a87; }
.main{float:left; width:300px; height:200px; background:#f3f3f3; }
.sub{float:left;width:300px; height:200px; background:#bc2931;}
</style>
<div class=”content”>
<div class=”abs”>
abs
</div>
<div class=”main”>
main
</div>
<div class=”sub”>
sub
</div>
</div>
以上代码在IE6下浏览会发现,绝对定位元素不见了。
产生原因不明,当满足以下条件之一可解决:
1、main + sub + 2 < content(各元素的宽度);
2、在main元素之前加一个空的<div></div>,如…<div></div><div class=”main”>…;
3、给abs元素再嵌套一个div元素,如<div><div class=”abs”>abs</div></div>
作者: 侯鸿飞 发布时间: 2011-05-22







作者: 焦占晓 发布时间: 2011-05-22
相关阅读 更多
热门阅读
-
office 2019专业增强版最新2021版激活秘钥/序列号/激活码推荐 附激活工具
阅读:74
-
如何安装mysql8.0
阅读:31
-
Word快速设置标题样式步骤详解
阅读:28
-
20+道必知必会的Vue面试题(附答案解析)
阅读:37
-
HTML如何制作表单
阅读:22
-
百词斩可以改天数吗?当然可以,4个步骤轻松修改天数!
阅读:31
-
ET文件格式和XLS格式文件之间如何转化?
阅读:24
-
react和vue的区别及优缺点是什么
阅读:121
-
支付宝人脸识别如何关闭?
阅读:21
-
腾讯微云怎么修改照片或视频备份路径?
阅读:28